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

Posted 2023-05-07

【中文标题】Angular UI Select2，为啥将 ng-model 设置为 JSON 字符串？

【英文标题】：Angular UI Select2, why does ng-model get set as JSON string?Angular UI Select2，为什么将 ng-model 设置为 JSON 字符串？

【发布时间】：2013-07-06 07:29:24

【问题描述】：

我使用角度的UI的SELECT2为一个相当简单的下拉菜单。它是由数据坐在我的控制器范围的静态数组的支持。在我的控制器我有一个被调用的下拉的NG-变化，这样我可以执行时的一些行动的价值功能的变化。

然而，什么我发现是，NG-模型的属性被设置为一个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 P>

我从来没有见过一个绑定到NG-模型之前做到这一点的属性，但是我也相当新的角度，从而很可能我只是在这里做得不对。我当然可以这样做$ .parseJSON（）转换成JSON字符串返回一个对象，但我宁愿不要，除非我不得不这样做。 感谢您的帮助！

【参考方案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

【讨论】：

有趣，这是有道理的，但我没有费心去尝试，因为根据文档不支持 ng-options：github.com/angular-ui/ui-select2

我没有使用过 ui-select2，所以这个解决方案可能会产生不良的副作用。在任何情况下，如果您要在选项上使用 ng-repeat，您将不得不处理简单的字符串而不是完整的对象。

感谢您的帮助。我可能会在 ui-select2 的 github 页面上问同样的问题，看看是否支持 ng-options 是否在路线图上，或者是否有理由不支持它。我可能可以做一些调整，让我的用例使用字符串而不是完整的对象。

【参考方案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;
    ;