0

https://plnkr.co/edit/zxTLC2VTfMkUu5zPs1Ss?p=preview

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

每个产品都有一系列记录。如果我要从“产品一”行中选择一条记录，我希望在其他两个产品行选择框中禁用“记录一”，但这并没有发生。

似乎 ngChange 指令被触发了两次，但我不确定为什么。也许是因为我正在改变禁用状态？

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

HTML： 

  <head>
    <script data-require="angular.js@1.6.5" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <my-component></my-component>
    <script src="script.js"></script>
  </body>

</html>

JS：

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

})

4

1 回答 1

1

因为我禁用了被选中的值，所以 AngularJS 正在null输入该值（null禁用的值是在 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
      }
    })
  })
}
于 2017-12-15T15:07:35.120 回答