我有一个flashcard应用程序,我从服务器获取一组闪卡记录,然后在ng-repeat循环中运行它。但是,我不想循环遍历这些平面记录,而是想用我可以调用的方法遍历一组对象,就像我在PHP中一样。
是否有“AngularJS”方法可以做到这一点,如果没有,最好的方法是什么,以便我能够做到这一点。使用我的记录加载一个flashcard对象的集合,然后使用ng-repeat?
在多个视图中使用此集合控制器:
mainApp.controller('browseController', function ($scope, $http, $rootScope) {
$http.get($rootScope.dataUrlPath, {
params: {
taskIdCode: 'getAllFlashcardsWithStacks'
}
}).success(function (data) {
$scope.flashcards = data['flashcards'];
});
});
查看:
<div class="col-md-5">
<h1 class="pageTitle">Browse Flashcards</h1>
<div ng-repeat="flashcard in flashcards">
<div>{{flashcard.front}}</div>
<div>{{flashcard.back}}</div>
</div>
</div>
我想做的是这样的事情:
<div class="col-md-5">
<h1 class="pageTitle">Browse Flashcards</h1>
<div ng-repeat="flashcard in flashcards">
{{flashcard.displayAsRichInteractiveFlashcard()}}
</div>
</div>
但是如果可能的话,我想做“Angular方式”,这似乎远离Angular的工作方式。
将记录转换为富对象集合的最佳方法是什么,以便我可以从各种视图访问其丰富的方法?
答案 0 :(得分:1)
是,有一种角度方式可以访问ng-repeat中的数据,即闪卡,使用可以调用的方法:通过创建自定义指令。
我们称之为自定义指令 my-flashcard-directive 。
<强>标记强>
<div ng-repeat="flashcard in flashcards">
<my-flashcard-directive flashcard="flashcard"></my-flashcard-directive>
</div>
然后在 my-flashcard-directive
您的指令可以访问scope.flashcard
并可以随意对其进行操作。
<强>指令强>
myModule.directive('myFlashcardDirective', function() {
return {
scope: {
flashcard: '='
},
restrict:'E',
template:"<div>{{flashcard.displayAsRichInteractiveFlashcard() }}</div>",
link: function(scope, element, attrs) {
scope.flashcard.displayAsRichInteractiveFlashcard=function (){//whatever
};
}
}
});
您的集合仍然具有相同的json-transportable字符串属性。
但是,您的自定义指令现在可以根据需要对其进行扩充。