对范围内选定元素的更改不会保留在可用元素数组中

Question

我使用的是AngularJS 1.5.6，并尝试通过在已经通过另一个组合框选择的对象中使用组合框来更新值。但是切换源对象后，这些更改将丢失。

为了更好地理解尝试此JSFIDDLE。

在上面的示例中，第一个组合框只会从可用列表中选择一个项目：

<select data-ng-model="currentElement"
        data-ng-options="element.name for element in elements track by element.id"
        data-ng-change="updateDeeperOption()">
</select>

第二个组合框在可用选项的第二个列表中工作：

<select data-ng-model="deeperOption"
        data-ng-options="option.name for option in availableOptions track by option.value"
        data-ng-change="writeDeeperOptionToCurrentElement()">
</select>

每当发生更改时，这两种方法只是在两个方向上更新数据：

$scope.updateDeeperOption = function() {
    $scope.deeperOption = $scope.availableOptions.filter(function (option) {
        return option.value === $scope.currentElement.going.deeper.to.myOption; })[0];
};
$scope.writeDeeperOptionToCurrentElement = function() {
    $scope.currentElement.going.deeper.to.myOption = $scope.deeperOption.value;
};

问题来自writeDeeperOptionToCurrentElement()。它会更新当前元素（您可以在小提琴中看到它），但是如果您切换到另一个元素，然后又返回，则丢失了更改。

任何想法，我错了？我认为，我仍然缺少对何时复制对象或仅在Angularj中引用的基本了解。因此任何解释或链接都会有所帮助。

Answer 1

更新：

我在此处隔离了实际问题，发现如果您从第一个选择中删除曲目，那么CurrentElement对象将通过参考更新。请参阅：https：//jsfiddle.net/tbzggyg1/4/

所以而不是这样：

<select data-ng-model="currentElement"
            data-ng-options="element.name for element in elements track by element.id"
            data-ng-change="updateDeeperOption()">

尝试以下操作：

<select data-ng-model="currentElement"
            data-ng-options="element.name for element in elements"
            data-ng-change="updateDeeperOption()">

这就是为什么：https：//docs.angularjs.org/api/ng/directive/ngoptions

...是使用 track by 子句，因为那时ngoptions将不通过参考来跟踪项目的身份，而是按照参考曲目通过表达式。例如，如果您的收集项目具有ID属性，则您将按item.ID跟踪。

---

旧答案：

看起来您的'$ scope.currentelement'对象实际上只是从数组中获得复制引用，因此，当您进行修改时，它不会真正更新原始数组（这是您的下拉列表绑定到的）。我尝试了一下，它起作用了：

  $scope.writeDeeperOptionToCurrentElement = function() { 
      // $scope.currentElement.going.deeper.to.myOption = $scope.deeperOption.value; // old code
      var elementRef = $scope.elements.filter(isMatchingElement)[0];
      elementRef.going.deeper.to.myOption = "" + $scope.deeperOption.value;
  };
  function isMatchingElement(e) {
    return e.id === $scope.currentElement.id;
  }

另外，将其添加到模板中，以便您可以看到发生的事情的全部图片：

<tt>{{currentElement}}</tt>
<hr>
<tt>{{elements}}</tt>

链接到小提琴叉：https：//jsfiddle.net/t2dvm0a2/

Answer 2

在ng-options中，每个选项项都由您在 track by中提供的值确定。

您是否赋予了您的深刻价值，事情会有效。

    <select data-ng-model="currentElement"
            data-ng-options="element.name for element in elements track by element.going.deeper.to.myOption"
            data-ng-change="updateDeeperOption()">
    </select>

请检查更新的小提琴https://jsfiddle.net/tbzggyg1/3/