Angular UI Select2,为什么ng-model被设置为JSON字符串？

Question

我正在使用angular-ui的select2进行相当简单的下拉菜单.它由我控制器范围内的静态数据阵列支持.在我的控制器中,我有一个函数,可以在下拉列表的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

我以前从未见过一个与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