Question

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

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

每个产品都有一系列记录。如果我要选择＆＃34;产品一＆＃34;排，我希望＆＃34;记录一个＆＃34;要在其他两个产品行选择框中禁用，但这不会发生。

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

}）

Answer 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
      }
    })
  })
}

AngularJS ngChange指令触发两次

1 个答案: