javascript - 使用 ng-repeat 比较两个数组

标签 javascript angularjs angularjs-ng-repeat

我正在尝试使用 Array1 中的 ng-repeat 创建多个复选框,并且我想将“checked”属性(使用 ng-checked)应用于某些复选框,具体取决于 Array2 中是否存在匹配项。

这里我们在 Controller 中有 array1:

$scope.possibleConditions = ["condition1", "condition2", "condition3", "condition4"];

然后 array2 来自同一 Controller ,但通过 JSON API。

{
    "treated" : false,
    "data" : [{
        "conditions" : ["condition1", "condition2"],
    }]
}

这是我当前在模板中设置的 ng-repeat:

<p ng-repeat="condition in possibleConditions">                     
    <input type="checkbox" id="{{condition}}" />
    <label for="{{condition}}">
        {{condition}}
    </label>            
</p>

我们希望将属性 checked 应用于输入,例如,如果在 Array2 的“conditions”中找到 Array1 中的“condition1”。

<小时/>

我尝试过的:

1:我尝试在 Controller 之后使用过滤器(我在 stackoverflow 上找到的):

.filter('customArray', function($filter){
return function(list, arrayFilter, element){
    if(arrayFilter){
        return $filter("filter")(list, function(listItem){
            return arrayFilter.indexOf(listItem[element]) != -1;
        });
    }
};

稍微修改 ng-repeat:

<p ng-repeat="conditions in possibleConditions | customArray:profileData.data:'conditions' ">

但这并没有奏效。

2:我尝试在 ng-repeat 中使用另一个 ng-repeat,然后将其与第一个匹配进行检查。

示例:

<p ng-repeat="conditions in possibleConditions">                    
    <input ng-repeat="condition in profileData.data[0].conditions | filter{condition == conditions}" type="checkbox" id="{{condition}}" />
    <label ng-repeat="condition in profileData.data[0].conditions | filter{condition == conditions}"  for="{{condition}}">
        {{condition}}
    </label>            
</p>

希望有人可以提供帮助/提供一些指导。 谢谢。

最佳答案

这里其实并不需要过滤器,很简单 ngChecked指令可以工作:

<p ng-repeat="condition in possibleConditions">
  <input type="checkbox" id="{{condition}}" 
         ng-checked="response.data[0].conditions.indexOf(condition) > -1" />
  <label for="{{condition}}">
    {{condition}}
  </label>
</p>

演示: http://plnkr.co/edit/fDn0niCCljo5wChzYiwa?p=info

其中 response 是来自 API 的数据。

关于javascript - 使用 ng-repeat 比较两个数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38238631/

相关文章:

javascript - 如何正确插入Reactjs滚动条模块

javascript - ng-repeat 没有出现在 ionic 中

javascript - 如何在单击按钮时更改 View /模型?

javascript - 如何使用 webpack 2 从 node_modules 导入 css

javascript - Yiic GridView 总是给出实时不是一个功能

javascript - 在关闭“显示模式”之前触发事件?

angularjs - Angular 指令之间的依赖关系

angularjs - 使用 Go 和 AngularJS 进行用户身份验证

angularjs:循环遍历一个数组与 View 中另一个数组的交叉值

javascript - Angularjs ng-有条件重复