Angular 1.5与1.8中ng-repeat差异：select选项值JSON序列化问题

在Angular 1.5.5中，使用以下代码将对象数组填充到<select>元素时，{{item}}会输出对象的JSON格式字符串，但升级到1.8.2后，{{item}}输出[object object]，需要让value属性获取对象的JSON表示：

<label class="select" ng-show="standardFieldList.length > 0">
    <select class="input-sm" ng-model="selectedStandardField" ng-change="addField('selectedStandardField')">
        <option value="">Add Standard Field</option>
        <option ng-repeat="item in standardFieldList" value="{{item}}" ng-if="!item.hide">{{item.value}}</option>
    </select>
    <i></i>
</label>

方法1：使用Angular内置json过滤器 #

Angular提供了内置的json过滤器，可直接将对象转换为JSON字符串。修改option的value属性：

<option ng-repeat="item in standardFieldList" value="{{item | json:0}}" ng-if="!item.hide">{{item.value}}</option>

• json:0表示生成无缩进的紧凑JSON字符串；如果需要带格式的JSON，直接使用{{item | json}}即可。

方法2：在控制器中预先转换JSON #

如果需要更灵活的处理逻辑，可以在控制器中提前将每个对象转换为JSON字符串，比如给数组元素添加jsonStr属性：

// 控制器代码示例
$scope.standardFieldList = standardFieldList.map(item => ({
    ...item,
    jsonStr: angular.toJson(item, false) // false参数禁用缩进
}));

随后在模板中直接使用预先处理好的字符串：

<option ng-repeat="item in standardFieldList" value="{{item.jsonStr}}" ng-if="!item.hide">{{item.value}}</option>

方法3：改用ng-options（推荐） #

Angular官方更推荐使用ng-options处理<select>选项绑定，这种方式无需手动处理JSON，直接将对象绑定到ng-model：

<label class="select" ng-show="standardFieldList.length > 0">
    <select class="input-sm" 
            ng-model="selectedStandardField" 
            ng-change="addField('selectedStandardField')"
            ng-options="item as item.value for item in standardFieldList | filter: {hide: false}">
        <option value="">Add Standard Field</option>
    </select>
    <i></i>
</label>

此时selectedStandardField直接对应选中的对象，后续addField方法可直接使用该对象，无需解析JSON。

内容的提问来源于stack exchange，提问作者Leventogenna