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中的「渲染」對象

回答

相關問題