Angular.js如何根据另一个列表中是否存在重复元素来有条件地检查复选框

user3681971 发表于 Dev

用户3681971

作为具有cshtml页面的一个非常新的angularjs用户，在模式窗口的页面加载期间，我试图检查重复的复选框（如果它存在于另一个列表中）。以下代码是概念性的：

<li data-ng-repeat="analysisType in analysisTypes|limitTo:12 | limitTo: -6">
    <input type="checkbox" ng-class="{'checked' : project.analysisTypes.indexOf(analysisType) != -1}" />
    {{analysisType.name}}
</li>

具体来说，如果在project.analysisTypes数组中找到了analysisType，我想选中该复选框。我几乎可以肯定这是可能的，但不知道如何做到。

$ scope上同时存在analysisTypes和project，因此可以使用数据。

或者也许解决方案是将复选框直接绑定到project.analysisTypes，但是我仍然需要能够动态呈现域复选框

Chickenrice

'indexOf'不能以这种方式（简单演示）用于查找数组的第一个匹配对象。您应该通过搜索对象的特定且唯一的属性（例如id）来找到它。

这是我的示例：

的HTML

<div ng-controller="myCtrl">
    <ul>
        <li ng-repeat="analysisType in analysisTypes">
            <input type="checkbox" ng-class="{'checked':isExist(analysisType.id)!=-1}" ng-checked="isExist(analysisType.id)!=-1"/>
            {{analysisType.name}}
        </li>
    </ul>
</div>

angular.module("myApp",[])
.controller("myCtrl",function($scope){
    $scope.analysisTypes = [{id:1,name:"typeA"},{id:2,name:"typeB"},{id:3,name:"typeC"}];

    $scope.project = {analysisTypes:[{id:2,name:"typeB"}]};

    $scope.isExist = function(id){
        return $scope.project.analysisTypes.map(function(type){return type.id;}).indexOf(id);
    }
});

这是jsFiddle DEMO。

请注意：Array.prototype.map和Array.prototype.indexOf仅可在IE9 +中使用。如果您有浏览器支持问题，则需要添加一些polyfill。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。