Question

我试图以两种不同的格式显示两个ng-repeats显示相同的数组：带有复选框和相同列表的简单列表，带有扩展信息和复选框。

以下示例在Angular中正常工作。

<label ng-repeat="item in vm.items">
  <input type="checkbox" ng-model="item.selected">
  {{item.name}}
</label>

<div ng-repeat="item in vm.items">
  <h1>{{item.name}}</h1>
  <p>{{item.desc}}</p>
  <input type="checkbox" ng-model="item.selected">
</div>

但如果我使用Material Design Lite，则检查状态不会更新，因此当您单击一个复选框时，另一个复选框仍然相同。

真实的例子：

<div ng-repeat="item in vm.items">
  <div class="mdl-card__title" ng-style="{'background-image': 'url({{item.photo}})'}">
    <h2 class="mdl-card__title-text">{{item.name}}</h2>
  </div>
  <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-{{$id}}">
    <input type="checkbox" ng-model="item.selected" ng-change="vm.updateMDL()" class="mdl-checkbox__input" id="checkbox-{{$id}}">
    <span class="mdl-checkbox__label">Select {{item.name}}</span>
  </label>
</div>

在列表中：

<div ng-repeat="item in vm.items">
  <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-list-{{$id}}">
    <input type="checkbox" ng-model="item.selected" class="mdl-checkbox__input" id="checkbox-list-{{$id}}">
    <span class="mdl-checkbox__label">{{item.name}}</span>
  </label>
</div>

如果我点击一个复选框，那么列表中的同一个复选框，对象的所选状态就会切换，点击的复选框也不会改变（因为它没有改变为首先选择的）

其他人遇到此问题？解决方法？

MDL不更新两个ng-repeats＆＃39;复选框值

0 个答案: