angularjs：循环遍历视图中与另一个数组交叉的数组

发布时间：2020-12-17 17:13:09 所属栏目：安全来源：网络整理

导读：我正在努力解决以下问题.我有一个全局array1,其值为FileA,FileB,FileC,FileD和FileE.然后我有一个特定的array2,其值为FileA和FileC. 我想要的输出是类似的 div class="matched"FileA/divdiv class="not_matched"FileB/divdiv class="matched"FileC/divdiv cl

我正在努力解决以下问题.我有一个全局array1,其值为FileA,FileB,FileC,FileD和FileE.然后我有一个特定的array2,其值为FileA和FileC.

我想要的输出是类似的

<div class="matched">FileA</div>
<div class="not_matched">FileB</div>
<div class="matched">FileC</div>
<div class="not_matched">FileD</div>
<div class="not_matched">FileE</div>

我正在考虑使用自定义过滤器进行嵌套的ng-repeat,但我无法看到如何做到这一点.

这是一个甚至没有编译的尝试

HTML

<body ng-app="myModule">
<div ng-controller="myController">
    <div ng-repeat="entity in entities">
        <div ng-repeat="myEntity in myEntities |  lookInside(entity)">
            {{myEntity.match}} - {{myEntity.name}}
        </div>
     </div>
</div>
</body>

和js

var myModule = angular.module('myModule',[]);

myModule.controller('myController',['$scope',function($scope) {
    $scope.entities = ['fileA','fileB','fileC','fileD','fileE'];
    $scope.myEntities = ['fileA','fileC'];
}]);

myModule.filter('lookInside',function(){
    return function(items,name){
        var arrayToReturn = [];
        var name = {};
        for (var i=0; i<items.length; i++){
            name.match = 'no';
            name.name = items[i];
            if (items[i] == name) {
                name.match = 'si';
            }
            arrayToReturn.push(name);
        }
        return arrayToReturn;
    };
});

http://jsfiddle.net/C5gJr/46/

这里有什么最好的方法？

干杯

更新：
我只是通过为每个条目使用一个过滤器来解决它是否在数组内部

<body ng-app="myModule">
<div ng-controller="myController">
    <div ng-repeat="entity in entities">
       {{entity | lookInside: myEntities}}
    </div>
</div>
</body>

和js

var myModule = angular.module('myModule',function(){
    return function(item,array){
        var name = 'no';
        for (var i=0; i<array.length; i++){
            if (array[i] == item) {
                name = 'si';
            }
        }
        return name;
    };
});

http://jsfiddle.net/C5gJr/48/

但是,数据处理性能的影响非常大(大型数据列表).这可能是不可避免的,但对此的任何评论都非常受欢迎.

干杯

解决方法

如果您只需要根据另一个数组切换类,请尝试使用ng-class和scope函数来检查辅助数组.

http://jsfiddle.net/VrB3H/

<div ng-repeat="entity in entities" ng-class="{'matched': isMatch(entity),'not_matched': !isMatch(entity)}">
        {{isMatch(entity)}} - {{entity}}
 </div>

myModule.controller('myController','fileC'];

    $scope.isMatch = function(entity)
    {
        return $scope.myEntities.indexOf(entity) >= 0;
    }
}]);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!