Question

我有一个具有这种结构的jsons数组：

[{
  'playlist_name': 'abced',
  'playlist_id': 123
}, {
  'playlist_name': 'abcde',
  'playlist_id': 123
}]

我想在这个div中插入这个jsons：

<div class="horizontal-tile" ng-repeat="todo in todos">
  <div class="tile-left" style='min-height:100px;width:100px;'>
    <div class="background-image-holder">
      <img alt="image" class="background-image" src="img/project-single-1.jpg">
    </div>
  </div>
  <div class="tile-right bg-secondary" style='min-height:100px;width: calc(100% - 100px);'>
    <div class="description" style="padding:10px;">
      <h4 class="mb8">{{ todo.playlist_name }}</h4>
    </div>
  </div>
</div>

然后我在todos中迭代todo，我进入这个范围

  Todos.get(12175507942)
        .success(function(data) {               
            $scope.todos = data;
        });

我的数据很好，但我似乎无法获得值playlist_name。

我打印数据然后得到了这个。

[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]

with，每个对象都是：

$$hashKey:"005"
playlist_id:"0DAlm2gb8DrtyRSXEKw07h"
playlist_name:"Rocola On The Go"
__proto__:Object

Todos.get的代码

angular.module('todoService', [])

    // super simple service
    // each function returns a promise object
    .factory('Todos', ['$http',function($http) {
        return {
            get : function(id) {
                return $http.post('/api/getPlaylists',{"id":id});
            },
            create : function(todoData) {
                return $http.post('/api/todos', todoData);
            },
            delete : function(id) {
                return $http.delete('/api/todos/' + id);
            }
        }
    }]);

我显示控制器代码：

angular.module('todoController', [])

    // inject the Todo service factory into our controller
    .controller('mainController', ['$scope','$http','Todos', function($scope, $http, Todos) {
        $scope.formData = {};
        $scope.loading = true;

        // GET =====================================================================
        // when landing on the page, get all todos and show them
        // use the service to get all the todos
        Todos.get(12175507942)
            .success(function(data) {
                console.log(data);      
                $scope.todos = data;
                $scope.loading = false;
            });

        // CREATE ==================================================================
        // when submitting the add form, send the text to the node API
        $scope.createTodo = function() {

            // validate the formData to make sure that something is there
            // if form is empty, nothing will happen
            if ($scope.formData.text != undefined) {
                $scope.loading = true;

                // call the create function from our service (returns a promise object)
                Todos.create($scope.formData)

                    // if successful creation, call our get function to get all the new todos
                    .success(function(data) {
                        $scope.loading = false;
                        $scope.formData = {}; // clear the form so our user is ready to enter another
                        $scope.todos = data; // assign our new list of todos
                    });
            }
        };

        // DELETE ==================================================================
        // delete a todo after checking it
        $scope.deleteTodo = function(id) {
            $scope.loading = true;

            Todos.delete(id)
                // if successful creation, call our get function to get all the new todos
                .success(function(data) {
                    $scope.loading = false;
                    $scope.todos = data; // assign our new list of todos
                });
        };
    }]);

我将显示视图页面：

<!doctype html>

<!-- ASSIGN OUR ANGULAR MODULE -->
<html ng-app="scotchTodo">

<head>
    <!-- META -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Optimize mobile viewport -->

    <title>Node/Angular Todo App</title>


    <!-- load bootstrap -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/theme.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/custom.css" rel="stylesheet" type="text/css" media="all" />
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400%7CRaleway:100,400,300,500,600,700%7COpen+Sans:400,500,600' rel='stylesheet' type='text/css'>


    <!-- SPELLS -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <!-- load angular -->

    <script src="js/controllers/main.js"></script>
    <!-- load up our controller -->
    <script src="js/services/todos.js"></script>
    <!-- load our todo service -->
    <script src="js/core.js"></script>
    <!-- load our main application -->

</head>
<!-- SET THE CONTROLLER -->

<body ng-controller="mainController">
    <div class="main-container">
        <section>
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center">
                        <h4 class="uppercase mb16">Tus Playlists<br></h4>
                        <p class="lead mb80"><br></p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-10 col-sm-offset-1 col-md-offset-2 col-md-8">
                        <div class="horizontal-tile" ng-repeat="todo in todos">
                            <div class="tile-left" style='min-height:100px;width:100px;'>
                                <div class="background-image-holder">
                                    <img alt="image" class="background-image" src="img/project-single-1.jpg">
                                </div>
                            </div>
                            <div class="tile-right bg-secondary" style='min-height:100px;width: calc(100% - 100px);'>
                                <div class="description" style="padding:10px;">
                                    <h4 class="mb8">{{ todo.playlist_name }}</h4>
                                </div>
                            </div>
                        </div>

                        <p class="text-center" ng-show="loading">
                            <span class="fa fa-spinner fa-spin fa-3x"></span>
                        </p>

                    </div>
                </div>
            </div>
        </section>
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/parallax.js"></script>
    <script src="js/scripts.js"></script>
</body>

</html>

这里是core.js

angular.module('scotchTodo', ['todoController', 'todoService']);

Answer 1

根据OP中提供的代码，您的代码工作正常。

<强>样本

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.todos = [{
  'playlist_name': 'abced',
  'playlist_id': 123
}, {
  'playlist_name': 'abcde',
  'playlist_id': 123
}];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <div class="horizontal-tile" ng-repeat="todo in todos">
  <div class="tile-left" style='min-height:100px;width:100px;'>
    <div class="background-image-holder">
      <img alt="image" class="background-image" src="img/project-single-1.jpg">
    </div>
  </div>
  <div class="tile-right bg-secondary" style='min-height:100px;width: calc(100% - 100px);'>
    <div class="description" style="padding:10px;">
      <h4 class="mb8">{{ todo.playlist_name }}</h4>
    </div>
  </div>
</div>
</div>

Angular ng-repeat cant获取对象的值

1 个答案: