ng-repeat中的ng-model值不起作用

Having difficulty to assign ng-model values inside ng-repeat

难以在ng-repeat中分配ng-model值

So i am repeating this div with an array of json objects. I can print the 'ID' value of the object inside any element. But i can't use that as the ng-model value for the checkbox inside. I must be doing something wrong here. Any idea what that is?

所以我用一组json对象重复这个div。我可以在任何元素内打印对象的“ID”值。但我不能将其用作内部复选框的ng-model值。我一定是在做错事。知道那是什么吗?

Will really appreciate it if someone can take a look.

如果有人可以看看,我会非常感激。

Here is a codepen of the issue. Code pen link

这是问题的代码。代码笔链接

3 个解决方案

#1

value for the model that assign to the checkbox is boolean whether it is true or false, unless you define the value. but again it is only 2 options value.

除非您定义值,否则分配给复选框的模型的值为boolean,无论是true还是false。但同样只有2个选项值。

so, rather than using id as model attribute, you might change it to some attribute that could store boolean value. why not using 'isSelected'

因此,您可以将其更改为可以存储布尔值的某个属性,而不是将id用作模型属性。为什么不使用'isSelected'

<div ng-controller="quoteController" ng-app="MyApp" class="benefits-container">
    <!-- benefits -->
      <div class="benefit" ng-class="{'selected': pe.id}" ng-repeat="pe in policyEnhancementsArr | filter: {type:'optional'}">
          <div class="top">
              <md-checkbox ng-model="pe.isSelected" class="blue"></md-checkbox>
              <h5 class="item">{{pe.name}}</h5>
              <h5 class="prize">{{pe.loading}}</h5>
          </div>
          <div class="bottom">
              <p>{{pe.limitDisplay}}</p>
          </div>
      </div>
  </div>

then update some isSelected value:

然后更新一些isSelected值:

...
{
  "id": "PVC022",
  "name": "NCD Protector",
  "limit": null,
  "limitDisplay": "N/A",
  "desc": "<TBC>",
  "type": "optional",
  "loading": 0.0,
  "isSelected": true
},
...

#2

i have done exactly the same code the difference is the filter that you applied on ng-bind. try reading the article i suggest use ng-value.

我做了完全相同的代码,区别在于您在ng-bind上应用的过滤器。尝试阅读我建议使用ng-value的文章。

whats the difference between ng-model and ng-value

什么是ng-model和ng-value之间的区别

#3

try using ng-repeat and ng-model withing the same line.

尝试使用相同的ng-repeat和ng-model。

instead of this

而不是这个

<div class="benefit" ng-class="{'selected': pe.id}" ng-repeat="pe in policyEnhancementsArr | filter: {type:'optional'}">
          <div class="top">
              <md-checkbox ng-model="pe.id" class="blue"></md-checkbox>

use this

    <div class="benefit" ng-class="{'selected': pe.id}" ng-repeat="pe in policyEnhancementsArr | filter: {type:'optional'}" 
ng-model="pe.id">
              <div class="top">
                  <md-checkbox  class="blue"></md-checkbox>

#1