角NG-重复不能得到对象

问题描述：

[{ 
    '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.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]

用，每个对象的存在：

$$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']);

这样你就可以得到'playlist_id'？你确定'$ scope.todos'具有所有正确的数据吗？你有没有调试过这个？ –

是的，我打印所有的JSON，我得到迭代的两个div，但它们是空的。我无法从待办事项中获得任何价值。 – Puzzero

我不知道，该怎么办 – Puzzero

答

您的代码工作正常按在OP给出的代码。

DEMO

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>

谢谢，但这不适用于我的代码。 – Puzzero

角NG-重复不能得到对象

相关推荐