javascript 在 AngularJS 中的 ng-repeat 中执行一个函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34085076/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Execute a function inside ng-repeat in AngularJS
提问by s.milziadi
I would like to execute a function inside a ng-repeat to retrieve some other data to show.
我想在 ng-repeat 中执行一个函数来检索要显示的其他一些数据。
For example I've a list of Apartments. I show this list using ng:repeat, than for each Apartment I would like to show the Owner, that is not the u.Apartments. So my getInqfunction make a call to a service to get the owner of a specified apartment. It seems to be logic for me, but it doesn't work.
It returns the "10 $digest() iterations reached. Aborting!"error.
例如，我有一个公寓列表。我使用 显示此列表ng:repeat，而不是我想向所有者显示的每个公寓，这不是u.Apartments。所以我的getInq函数调用一个服务来获取指定公寓的所有者。这对我来说似乎是逻辑，但它不起作用。它返回"10 $digest() iterations reached. Aborting!"错误。
I've this code:
我有这个代码：
<div ng:repeat="u in units">
<div ng:repeat="a in u.Apartments">
<div class="targhetta" style="margin-top:10px">{{a.Name}}</div>
<br />{{getInq(a.ApartmentId)}}
<table>
<tr ng:repeat="cs in a.CS">
<td>{{cs.Position}}</td>
<td>{{cs.Code}}</td>
</tr>
</table>
</div>
</div>
And in the controller:
在控制器中：
$scope.getInq = function (idApp) {
$http.get('http://localhost:8081/api/registry/GetLastInq?processdata=' + (new Date()).getTime() + '&appartamentoId=' + idApp, { headers: headers })
.success(function (data2) {
$scope.nomeInquilinoVw = data2.Name;
$scope.cognomeInquilinoVw = data2.Surname;
$scope.nomeCognome = $scope.nomeInquilinoVw + " " + $scope.cognomeInquilinoVw;
})
.error(function () {
$scope.success = false;
$scope.error = "There was an error!";
});
return $scope.nomeCognome;
}
Any suggestion?
有什么建议吗？
回答by Synapse
You should create a custom directive pass in any data you want from the ng-repeat and do any action you want. The directive will fire its link function on every ng-repeat loop
您应该创建一个自定义指令，传入您想要从 ng-repeat 中获取的任何数据，并执行您想要的任何操作。该指令将在每个 ng-repeat 循环上触发其链接函数
var app = angular.module('myApp', [])
.controller('myCtrl', function($scope){
$scope.data = ['a', 'b', 'c'];
})
.directive('myDirective', function(){
return {
restrict: "A",
template: '<div>{{ myDirective }}</div>', // where myDirective binds to scope.myDirective
scope: {
myDirective: '='
},
link: function(scope, element, attrs) {
console.log('Do action with data', scope.myDirective);
}
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<ul>
<li ng-repeat="item in data" my-directive="item">{{ item }}</li>
</ul>
</div>
</div>Check your console for the action
检查您的控制台的操作
回答by ágoston Székely
Do not use {{getInq(a.ApartmentId)}}in your html. It will generate an awful lot of http request, that is why you are getting an error.
不要{{getInq(a.ApartmentId)}}在你的 html 中使用。它会生成大量的 http 请求，这就是您收到错误的原因。
Instead call this function for every item you need from your controller, and add to the $scope.unitsvariable to the correct place. This will end up just enough http request, and once you have them, will stop running more.
而是为控制器中需要的每个项目调用此函数，并将$scope.units变量添加到正确的位置。这将最终得到足够的 http 请求，一旦你有了它们，就会停止运行更多。
回答by yukuan
the reason why this error happens is :
发生此错误的原因是：
getInq return $scope.nomeCognome, and $scope.nomeCognome change every time when ng-repeat iterate the collection, every change will trigger the $digest cycle, which will cause a horrible result. you should avoid something like this will make $digest much complicated.
getInq 返回$scope.nomeCognome，并且每次ng-repeat 迭代集合时$scope.nomeCognome 都会发生变化，每次变化都会触发$digest 循环，会造成可怕的结果。你应该避免这样的事情会使 $digest 变得更加复杂。
回答by pragya sharma
angular directives are used to manipulate the 2 way data binding, you should not call the methods, as you have shown specially from within the two ng-repeat they are basically loops, It would slow down your page loading also. you should properly create your JSON for data binding within the controller. below should be you HTML code:
角度指令用于操作 2 路数据绑定，您不应该调用这些方法，正如您在两个 ng-repeat 中特别显示的那样，它们基本上是循环，它也会减慢您的页面加载速度。您应该为控制器内的数据绑定正确创建 JSON。下面应该是你的 HTML 代码：
<div ng:repeat="u in units">
<div ng:repeat="a in u.Apartments">
<div class="targhetta" style="margin-top:10px">{{a.Name}}/div>
<table>
<tr ng:repeat="cs in a.CS">
<td>{{cs.Position}}</td>
<td>{{cs.Code}}</td>
</tr>
</table>
</div>
</div>
and in controller you should create your JSON as
在控制器中，您应该将 JSON 创建为
units=[
{ u.Appartment:[{a.cs[value1,value2]},{},{}]},{},{}]
something like this
像这样的东西
for( var i=0; i<u.Apartment.length;i++)
{
u.Apartment[i].cs=$scope.getInq(u.Apartment[i].Id);
}
