AngularJS中的“渲染”对象

这里是AngularJS的新手（之前使用过BackboneJS），并且正在尝试学习AngularJS。我试图基本渲染一堆带有自己div“视图”的对象。在我的控制器中，我有一组对象（具有相同属性的所有对象），我很想渲染为便笺。我的思考过程是以某种方式从数组中的每个对象中获取数据，并将每个数据呈现为div（我可以将其设置为看起来像粘滞便笺的样式）。AngularJS中的“渲染”对象

的代码我迄今：

var myApp = angular.module('myApp', []); 

myApp.controller('MainCtrl', ['$scope', '$http', function ($scope, $http, Note) { 
    $scope.notesArray= []; 
    $http.get('notes_data.json').success(function(data) { // basically grab all the data from a JSON file 
    data.data.forEach(function(obj) { 
     $scope.notesArray.push(obj); 
    }); 
    }) 
}]);

我的index.html样子：

<!doctype html> 
<html> 
    <head> 
    <title>My Angular App</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 

    </head> 
    <body> 
     <div ng-app="myApp"> 
      <div ng-controller="MainCtrl"> 
       Some stuff here 
      </div> 
     </div> 
    <script type="text/javascript" src="js/app.js"></script> 
</body> 
</html>

而且，这将会是巨大的，如果有人能对我怎么能代表发表评论这些对象更有效（使用工厂，服务等）。谢谢！

来源

2015-06-24 fibono

你看着'NG-repeat'了吗？ – Claies

做分离ajax服务和调用该服务..从那里获取该数据，然后显示在UI上使用ng-repeat' –

做这样的事情，与ng-repeat：

<!doctype html> 
<html> 
    <head> 
    <title>My Angular App</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 

    </head> 
    <body> 
     <div ng-app="myApp"> 
      <div ng-controller="MainCtrl"> 
       <div class="note" ng-repeat="note in notesArray"> 
        <div class="wrapper" ng-class="note.done ? 'done' : 'undone'"> 
         <p class="title">{{note.title}}</p> 
         <span class="done">{{note.done}}</span> 
        </div> 
       </div> 
      </div> 
     </div> 
    <script type="text/javascript" src="js/app.js"></script> 
</body> 
</html>

来源

2015-06-24 23:10:22 c4k

太棒了！看起来，这种方式会以同样的方式呈现音符。如果你想包含逻辑来渲染一些与其他人不同的笔记呢？ – fibono

这取决于您想要以不同的方式渲染它们的标准。如果它与一个属性的值有关，那么你可以使用'ng-if'或'ng-class'，如果你想显示不同的even/odd音符，你可以在这里阅读更多关于ng-repeat的信息https： //docs.angularjs.org/api/ng/directive/ngRepeat。我编辑了我的问题，向您展示如何设置与“完成”状态有关的类。 – c4k

AngularJS中的“渲染”对象

回答

相关问题