[英]Execute a function inside ng-repeat in AngularJS
我想在ng-repeat中執行一個函數來檢索要顯示的其他一些數據。
例如,我列出了公寓。 我使用ng:repeat
顯示這個列表,而不是每個公寓我想向所有者展示,那不是u.Apartments
。 所以我的getInq
函數調用服務來獲取指定公寓的所有者。 這對我來說似乎是邏輯,但它不起作用。 它返回"10 $digest() iterations reached. Aborting!"
錯誤。
我有這個代碼:
<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>
在控制器中:
$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;
}
有什么建議嗎?
您應該在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>
檢查控制台是否有動作
不要在你的html中使用{{getInq(a.ApartmentId)}}
。 它會生成大量的http請求,這就是你收到錯誤的原因。
而是從控制器為您需要的每個項目調用此函數,並將$scope.units
變量添加到正確的位置。 這將最終得到足夠的http請求,一旦你擁有它們,將停止運行更多。
發生此錯誤的原因是:
getInq返回$ scope.nomeCognome,$ scope.nomeCognome每次ng-repeat迭代集合時都會更改,每次更改都會觸發$ digest循環,這將導致可怕的結果。 你應該避免這樣的事情會讓$ digest變得更加復雜。
angular指令用於操作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>
在控制器中,你應該創建你的JSON
units=[
{ u.Appartment:[{a.cs[value1,value2]},{},{}]},{},{}]
這樣的事情
for( var i=0; i<u.Apartment.length;i++)
{
u.Apartment[i].cs=$scope.getInq(u.Apartment[i].Id);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.