简体   繁体   English

在AngularJS中执行ng-repeat内的函数

[英]Execute a function inside ng-repeat in AngularJS

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 . 我使用ng:repeat显示这个列表,而不是每个公寓我想向所有者展示,那不是u.Apartments So my getInq function make a call to a service to get the owner of a specified apartment. 所以我的getInq函数调用服务来获取指定公寓的所有者。 It seems to be logic for me, but it doesn't work. 这对我来说似乎是逻辑,但它不起作用。 It returns the "10 $digest() iterations reached. Aborting!" 它返回"10 $digest() iterations reached. Aborting!" error. 错误。

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? 有什么建议吗?

You should create a custom directive pass in any data you want from the ng-repeat and do any action you want. 您应该在ng-repeat中创建所需数据的自定义指令传递,并执行您想要的任何操作。 The directive will fire its link function on every ng-repeat loop 该指令将在每个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 检查控制台是否有动作

Do not use {{getInq(a.ApartmentId)}} in your html. 不要在你的html中使用{{getInq(a.ApartmentId)}} It will generate an awful lot of http request, that is why you are getting an error. 它会生成大量的http请求,这就是你收到错误的原因。

Instead call this function for every item you need from your controller, and add to the $scope.units variable to the correct place. 而是从控制器为您需要的每个项目调用此函数,并将$scope.units变量添加到正确的位置。 This will end up just enough http request, and once you have them, will stop running more. 这将最终得到足够的http请求,一旦你拥有它们,将停止运行更多。

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. getInq返回$ scope.nomeCognome,$ scope.nomeCognome每次ng-repeat迭代集合时都会更改,每次更改都会触发$ digest循环,这将导致可怕的结果。 you should avoid something like this will make $digest much complicated. 你应该避免这样的事情会让$ digest变得更加复杂。

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. angular指令用于操作2路数据绑定,你不应该调用方法,因为你在两个ng-repeat中特别显示它们基本上是循环,它也会减慢你的页面加载速度。 you should properly create your JSON for data binding within the controller. 您应该在控制器中正确创建用于数据绑定的JSON。 below should be you HTML code: 下面应该是你的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);
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM