Question

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

我到目前为止的代码：

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>

此外，如果有人可以评论我如何更有效地代表这些对象（使用工厂，服务等），那就太棒了。谢谢！

Answer 1

使用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>

AngularJS中的“渲染”对象

1 个答案: