[英]In Angular, how can I use ng-repeat to pass a variable to that triggers it repeat number?
In my app I do a database call to get a list of elements to display using ng-reat
, this works fine. 在我的应用程序中,我进行数据库调用以获取要使用ng-reat
显示的元素列表,这很好用。 Inside that list is another list. 该列表内是另一个列表。 That depends on another DB call. 这取决于另一个数据库调用。
I'd like to pass an id and repeat an element the number of results I get back and output their data. 我想传递一个ID并重复一个元素,使其返回的结果数与我输出的数据相同。 Something like this: 像这样:
<div ng-repeat="library in libraries">
<p>Read our books:</p>
<p ng-repeat="book in books">{{book.title}}</p>
</div>
I thought about this: 我想到了:
<p ng-repeat="book in getBooks({library.id}) track by $index">{{book.title}}</p>
this use something like this to trigger the number of repeats and the values: 使用类似这样的东西来触发重复次数和值:
$scope.getBooks = function(id){
...run my database query using the id...
...update my scope to include the books...
....**magic**...
}
but I'm not sure if that will work and how to update my scope to include the book title. 但我不确定是否可行,以及如何更新范围以包括书名。 I've used this to repeat an x number of times but not include an updated $scope
我用它重复了x次,但不包括更新的$scope
Along with Corbin, my solution would be to pre-load the data. 与Corbin一起,我的解决方案是预加载数据。 Do that with an Angular factory object. 使用Angular工厂对象执行此操作。
angular.module('appName')
.factory('DataManager', DataManager);
function DataManager($log, $timeout, DataService) {
var mngr, config = getConfig(); // any default values
$log.debug('DataManager Init');
mngr = {
CurrentSearchTerm: null,
Libraries: [],
Abort: abort,
GetData: getData // Function call to get data.
};
// This call is your main ajax call, it could be one call to get the
// full dataset of lib + books in json format. Or multiple calls.
function getData(){
DataService.getData().then(function(response){
// ...parse data, etc...loop and :
mngr.Libraries.push(parsedDataItem);
};
}
return mngr;
}
Inject that into your controller. 将其注入您的控制器。 Then you loop over that data. 然后,您遍历该数据。
<ul>
<li ng-repeat="library in mngr.Libraries">
<!-- now you should have library.Books which was already sent down in the factory payload. -->
</li>
</ul>
Again to make your life a bit easier use a directive, each repeat push it's data into a directive: 再次使用指令使您的生活更轻松,每次重复将其数据推送到指令中:
<library data="library">
Which allows you to have a nice template and scope into just that one library. 这使您可以拥有一个不错的模板并将其范围限制在该库中。
angular('appName').directive('library',function(){
return{
restrict:'E',
replace:true,
templateUrl:'library.view.html',
scope:{
data:'='
},
controller:function($scope,$log){
// Here $scope.data === library from your ngRepeat!
}
};
});
Lastly, if you wanted an ondemand loading of the books, in the directive you can add a method to your DataManager to 'getBooks' for that one library object. 最后,如果您希望按需加载书籍,则可以在指令中为该库对象的DataManager添加方法以“ getBooks”。
Does that make more sense? 这更有意义吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.