Question

http://plnkr.co/edit/eayVNWWEXE6rUfddTdgg?p=info

我有这个客户对象

   $scope.customerFound = {
    "id":"1",
    "customerId":2,
    "customerLabel":"light", 
    "valueId":55,
    "valueLabel":"TOP"
  }

这个循环遍历ng-options的列表：

  $scope.customerList = [
      {
            "valueId":55,
            "valueLabel":"LUOL"
      },
      {
            "valueId":65,
            "valueLabel":"TOP"
      },
      {
            "valueId":75,
            "valueLabel":"BOT"
      },
    ]
};

HTML

  <select ng-model="customerFound" ng-options="customer.valueLabel for customer in customerList track by customer.valueLabel | orderBy:'valueLabel'">
        <option selected value="" disabled id="text-disabled">  Select </option>
  </select>

{{customerFound}}

plnkr：http://plnkr.co/edit/eayVNWWEXE6rUfddTdgg?p=info

如果您从下拉列表中选择时发现plnkr，我的整个customerFound对象将更改为custermorList中的两个属性。

是否有简洁的方法来更新customerFound对象中的valueId和valueLabel而无需进行大量的数据转换？

由于

Answer 1

我认为您应该稍微重构数据 - 如果您想要更改自己的对象的两个属性，那么它变得非常简单：

http://plnkr.co/edit/betys07Cq9I1QRmP7HIs?p=preview

$scope.customerFound = {
  "id":"1",
  "customerId":2,
  "customerLabel":"light", 
  "value": { 
    "id":55,
    "label":"TOP"
  }
}

$scope.customerList = [
  {
    "id":55,
    "label":"LUOL"
  },
  {
    "id":65,
    "label":"TOP"
  },
  {
    "id":75,
    "label":"BOT"
  },
]

<select ng-model="customerFound.value" ng-options="value as value.label for value in customerList track by value.label | orderBy:'valueLabel'">
    <option selected value="" disabled id="text-disabled">  Select </option>
</select>

如果您无法对数据进行重组，那么您可以执行以下操作：

http://plnkr.co/edit/had9Q9qkmpfDYydUzBNE?p=preview

基本上，使用tmp ng-model，并使用ng-change设置属性：

 $scope.setSelected = function(o) {
  for (var k in o) {
    if (o.hasOwnProperty(k)) {
      $scope.customerFound[k] = o[k];
    }
  }
}

<select ng-change="setSelected(tmp)" ng-model="tmp" ng-options="customer.valueLabel for customer in customerList track by customer.valueLabel | orderBy:'valueLabel'">
    <option selected value="" disabled id="text-disabled">  Select </option>
</select>

Answer 2

如果您无法按照其他一些评论/答案中的建议重新排列数据，那么我认为使用ng-change的版本会回答您的问题：

$scope.updateCustomerFound = function() {
  $scope.customerFound.valueId = $scope.customerFoundSelect.valueId;
  $scope.customerFound.valueLabel = $scope.customerFoundSelect.valueLabel;
};

并更新select：

<select ng-model="customerFoundSelect" ng-change="updateCustomerFound()" ...>

我的分叉plunker。

ng-options和绑定到复杂数据模型

2 个答案: