ng-repeat中的ng-model值无法正常工作

时间:2016-05-16 09:18:38

标签: javascript angularjs angularjs-ng-repeat angular-ngmodel

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

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

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

这是问题的代码。 Code pen link

.

3 个答案:

答案 0 :(得分:1)

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

因此,您可以将其更改为可以存储布尔值的某个属性,而不是将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>

然后更新一些isSelected值:

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

答案 1 :(得分:0)

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

whats the difference between ng-model and ng-value

答案 2 :(得分:0)

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

而不是

<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>

使用此

    <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>