9

我正在使用 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);
}

这是我的完整示例的一个 plunker：http: //plnkr.co/edit/G39iZC4f7QH05VctY8zG

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

4

2 回答 2

6

如果你想拥有对象值，你需要在你的选择上使用 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

于 2013-07-08T20:50:09.830 回答
2

谢谢卡尔！我为此挣扎了一天

作为与我遇到类似问题的其他人的说明，当使用控制器/指令中无法访问和定义的 ng-model 时，我像这样解决了它。

//country.Model 有 Code 和 Name 节点

* HTML *

 <select 
name="country" data-ng-model="country.Model"  
    data-ui-select2=""  
    data-ng-change="countryChanged(country.Model)"  <!--only for test, log to console-->
    data-ng-options="country as CodeAndName(country) for country in countries"
    data-placeholder="{{placeholderText(country.Model, '- - Select Country - -')}}" >
    <option value=""></option>
</select>

* JS *

 function controller($scope, $q, $location, $routeParams) {

    $scope.countryChanged = function(item) { // for test                
      console.log('selectedType is: ', item);
    };

    //returns the item or the text if no item is selected
    $scope.placeholderText = function (item, text){ 
        if (item == undefined)
            return text;
        return $scope.CodeAndName(item);
    };

    // returns a string for code and name of the item, used to set the placeholder text
    $scope.CodeAndName = function (item) { 
        if (item == undefined)
            return '';
        return item.Code + ' - ' + item.Name;
    };
于 2014-03-06T15:38:32.027 回答