如何将多选元素与对象数组绑定？

【问题标题】：How to bind a multi-select element with object array?如何将多选元素与对象数组绑定？
【发布时间】：2017-03-31 11:53:30
【问题描述】：

我有一个元素，我想将其与模型绑定以获取/设置值并使用角度 1 从列表中填充它

按照我的方式，我可以将它从 UI 绑定到模型，反之亦然，我做错了什么？

HTML：

<div ng-controller="MyCtrl">
    <select class="form-control"        
    ng-options="o as o.prop for o in brands"  
    ng-model="selectedBrands" 
    multiple="multiple" 
    >
    </select>
</div>

JS：

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.brands = [{
    prop: 1
  }, {
    prop: 2
  }, {
    prop: 3
  }];
  $scope.selectedBrands = [{
    prop: 2
  }];
}

JSFiddle：

http://jsfiddle.net/4L8b7cke/

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

重用$scope.brands 元素，不要为选定的项目创建新元素，因为 ngModel 通过引用监视模型。

$scope.selectedBrands = [$scope.brands[0],$scope.brands[1]];

更新：

默认情况下，ngModel 通过引用而不是值来监视模型。在将 select 绑定到作为对象或集合的模型时，了解这一点很重要。

来自ngOptions documentation

【讨论】：

啊，我明白了。谢谢！
我会在十分钟内接受这个答案（所以现在不会让我这样做）
@Matej：对于我们这些不熟悉 Angular 的人（我将自己包括在该列表中），您能解释一下问题是什么，为什么会出现问题以及这个答案如何解决这个问题？（不过，我承认“这很神奇”很可能是解释。）
据我所知，我在问题中没有发现问题。您能否解释一下问题中是什么让您建议 $scope.selectedBrands = [$scope.brands[0],$scope.brands[1]];作为答案。
@DavidThomas 我假设 Angular 通过引用绑定，而不是检查控制器中设置的值与列表可能值的相等性。