javascript - 无法在 ng-repeat 中的复选框上设置 ng 模型

Question

我有一排复选框，一次只能勾选一个，如果你点击被选中的复选框，它的状态应该翻转。所以如果它被选中并且你点击它，它应该取消选中，反之亦然。

型号

this.models = [
  {name: 'blah', defaulted: false},
  {name: 'fdsf', defaulted: false},
  ...
]

模板

<input 
  type="checkbox"
  ng-repeat="model in vm.models"
  ng-checked="model.defaulted === true" 
  ng-change="vm.setDefault($index)"
  ng-model="model.defaulted" />

a.这个不行，模型没有更新

http://embed.plnkr.co/O275a9O7y60NuimFYdYi?show=preview

this.setDefault = (j) => this.models = this.models.map((m, i) => {
  return j === i 
    ? Object.assign({}, m, {defaulted: !m.defaulted}) 
    : Object.assign({}, m, {defaulted: false}) 
}) 

b. 模型在此模型中正确更新，但您无法通过再次单击复选框来取消切换(因此示例 a 中的 !m.defaulted)

http://embed.plnkr.co/MOBuN06R0hmcnpGu01Z7?show=preview

// this works, but now you can't uncheck a box that is checked
this.setDefault = (j) => this.models = this.models.map((m, i) => {
  return j === i 
    ? Object.assign({}, m, {defaulted: true}) 
    : Object.assign({}, m, {defaulted: false}) 
}) 

需要一个不使用 radio 的解决方案

Answer 1

你所要做的就是改变:

this.setDefault = (j) => this.models = this.models.map((m, i) => {
  return j === i 
    ? Object.assign({}, m, {defaulted: true}) 
    : Object.assign({}, m, {defaulted: false}) 
}) 

到

this.setDefault = (j) => this.models = this.models.map((m, i) => {
  return j === i 
    ? Object.assign({}, m, {defaulted: m.defaulted}) 
    : Object.assign({}, m, {defaulted: false}) 
}) 

通过将其更改为 Object.assign({}, m, {defaulted: m.defaulted})，您可以切换当前选中/未选中复选框的状态。

编辑:请注意@PankajParkar 的答案更好，因为与我的答案不同，它只是解决了主要问题，该答案对于性能也更好，因为它不会覆盖 this.models 数组使用 Array.prototype.map() - 这使得 Angular 在 ngRepeat 循环中重新渲染 View 。

欢迎您改为接受他们的回答