Javascript AngularJS ngChange指令发射两次

在链接的plunker中，我列出了3种产品，每种产品都有一个选择框

每个产品都有一系列记录。如果我要从Product One行中选择一条记录，我希望在其他两个Product row选择框中禁用record One，但事实并非如此

ngChange指令似乎被解雇了两次，尽管我不知道为什么。可能是因为我正在改变禁用状态

如果它应该触发两次是正确的，那么我不确定它为什么取消选择值并再次将字段设置为空

HTML:

JS:

---

}

因为我禁用了所选的值，AngularJS随后将该值置零。1.6中引入了禁用的值置零，因此选择框将保持空白

为了解决这个问题，我在选择它的产品行中保留了该值，但在其他行中禁用了它

更新后的mappingChange函数现在如下所示：

$ctrl.mappingFieldChange = () => {
  console.log('mappingFieldChange')
  const fieldsMapped = getSelectedFields()

  $ctrl.selectedProduct.productFields.forEach((productField) => {
    // Disable the record keys that are selected and enable any others
    productField.recordFields.forEach(recordField => {
      if (productField.recordKey === recordField.key) {
        recordField.disabled = false
      }
      else if (fieldsMapped.indexOf(recordField.key) >= 0) 
        recordField.disabled = true
      }
      else {
        recordField.disabled = false
      }
    })
  })
}

angular
  .module('app', [])
  .component('myComponent', {
    template: `
      <div style="display: flex; margin-bottom: 10px;" ng-repeat="productField in $ctrl.selectedProduct.productFields track by $index">
        <div style="padding-right: 5px">
         {{ productField.label }} &rarr;
        </div>
        <div>
          <select
            ng-model="productField.recordKey"
            ng-options="recordField.key as recordField.label disable when recordField.disabled for recordField in productField.recordFields"
            ng-change="$ctrl.mappingFieldChange()">
          </select>
        </div>
      </div>
    `,
    controller: function() {
      $ctrl = this

      this.selectedProduct = {
        productFields: [
          {
            key: 'one',
            label: 'Product One',
            recordFields: [
              {
                key: 'one',
                label: 'Record One',
                disabled: false,
              },


    {
            key: 'two',
            label: 'Record Two',
            disabled: false,
          },
          {
            key: 'three',
            label: 'Record Three',
            disabled: false,
          },
        ],
      },
      {
        key: 'two',
        label: 'Product Two',
        recordFields: [
          {
            key: 'one',
            label: 'Record One',
            disabled: false,
          },
          {
            key: 'two',
            label: 'Record Two',
            disabled: false,
          },
          {
            key: 'three',
            label: 'Record Three',
            disabled: false,
          },
        ],
      },
      {
        key: 'three',
        label: 'Product Three',
        recordFields: [
          {
            key: 'one',
            label: 'Record One',
            disabled: false,
          },
          {
            key: 'two',
            label: 'Record Two',
            disabled: false,
          },
          {
            key: 'three',
            label: 'Record Three',
            disabled: false,
          },
        ],
      },
    ]
  }

  $ctrl.mappingFieldChange = () => {
    console.log('mappingFieldChange')
    const fieldsMapped = getSelectedFields()

    $ctrl.selectedProduct.productFields.forEach((productField) => {
      // Disable the record keys that are selected and enable any others
      productField.recordFields.forEach(recordField => {
        if (fieldsMapped.indexOf(recordField.key) >= 0) {
          recordField.disabled = true
        }
        else {
          recordField.disabled = false
        }
      })
    })
  }

  function getSelectedFields() {
    let fieldsMapped = []

    // Create an array of record field keys that are already selected
    $ctrl.selectedProduct.productFields.forEach((productField) => {
      if (productField.recordKey) {
        fieldsMapped.push(productField.recordKey)
      }
    })

    return fieldsMapped
  }
},

$ctrl.mappingFieldChange = () => {
  console.log('mappingFieldChange')
  const fieldsMapped = getSelectedFields()

  $ctrl.selectedProduct.productFields.forEach((productField) => {
    // Disable the record keys that are selected and enable any others
    productField.recordFields.forEach(recordField => {
      if (productField.recordKey === recordField.key) {
        recordField.disabled = false
      }
      else if (fieldsMapped.indexOf(recordField.key) >= 0) 
        recordField.disabled = true
      }
      else {
        recordField.disabled = false
      }
    })
  })
}