javascript Angularjs 如何根据另一个列表中重复元素的存在有条件地检查复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25298377/
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
Angularjs how to conditionally check a checkbox based upon existence of repeat element in another list
提问by user3681971
as a very new angularjs user with a cshtml page, during page load of a modal window, I am trying to check a repeating checkbox if it exists in another list. the code below is conceptual:
作为一个非常新的具有 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>
specifically, if analysisType is found in project.analysisTypes array, I would like to check the checkbox. I am nearly certain that it is possible, but can't figure out how.
具体来说，如果在 project.analysisTypes 数组中找到 analysisType，我想选中复选框。我几乎可以肯定这是可能的，但无法弄清楚如何。
analysisTypes and project both exist on the $scope, so that data is available.
analysisTypes 和 project 都存在于 $scope 中，因此数据是可用的。
or maybe the solution is to bind the checkboxes directly to project.analysisTypes, but I still need to be able to dynamically render the domain checkboxes
或者解决方案是将复选框直接绑定到 project.analysisTypes，但我仍然需要能够动态呈现域复选框
回答by Polochon
you could use the ng-checked directive to check your input when the condition return true or just bind your input with a ng-model.
您可以使用 ng-checked 指令在条件返回 true 时检查您的输入，或者仅将您的输入与 ng-model 绑定。
try something like that
尝试这样的事情
<input type="checkbox" ng-checked="project.analysisTypes.indexOf(analysisType) != -1" />
回答by Chickenrice
'indexOf' can't be used to find the first matched object of an array in this way(simple demo). You should find it by searching specific and unique attribute of the object, e.g., id.
'indexOf' 不能用于以这种方式查找数组的第一个匹配对象（简单演示）。您应该通过搜索对象的特定和唯一属性（例如 id）来找到它。
Here is my example:
这是我的例子：
HTML
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>
JS
JS
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);
}
});
Here is the jsFiddle DEMO.
Please note: Array.prototype.mapand Array.prototype.indexOfonly can be used in IE9+. You need to add some polyfill if you have browser supporting concern.
请注意：Array.prototype.map和Array.prototype.indexOf只能在 IE9+ 中使用。如果您有浏览器支持问题，则需要添加一些 polyfill。
