angularjs - Angular UI Select2，为什么将 ng-model 设置为 JSON 字符串？

Question

我正在使用 angular-ui 的 select2 进行相当简单的下拉菜单。它由位于我的 Controller 范围内的静态数据数组支持。在我的 Controller 中，我有一个在下拉菜单的 ng-change 时调用的函数，以便我可以在值更改时执行一些操作。

但是，我发现 ng-model 的属性被设置为 JSON 字符串而不是实际的 javascript 对象，这使得无法使用点表示法从该模型中获取属性。

这是处理下拉列表值更改的函数:

$scope.roleTypeChanged = function() {
  //fine:
  console.log('selectedType is: ', $scope.adminModel.selectedType);

  // this ends up being undefined because $scope.adminModel.selectedType is a 
  // JSON string, rather than a js object:
  console.log('selectedType.typeCode is: ', $scope.adminModel.selectedType.typeCode);
}

这是我完整示例的一个小插曲: http://plnkr.co/edit/G39iZC4f7QH05VctY8zG

我以前从未见过绑定(bind)到 ng-model 的属性这样做，但是我对 Angular 也很陌生，所以很可能我在这里做错了什么。我当然可以做一些类似 $.parseJSON() 的事情来将 JSON 字符串转换回一个对象，但我宁愿不这样做，除非我必须这样做。
谢谢你的帮助!

Answer 1

如果你想拥有对象值，你需要在你的选择上使用 ng-options。实际上，使用 ng-repeat 自己创建选项只会让您拥有各种选项的字符串值:

<select ui-select2
    ng-model="adminModel.selectedType"
    ng-change="roleTypeChanged()"
    data-placeholder="Select Role Type" ng-options="type.displayName for type in adminModel.roleTypes">
  <option value=""></option>
</select>

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