<select>
和<option>
一起使用时,ng-repeat创建空对象。 但是,该数组看起来很正常。每个元素都已定义,没有空元素。
我已经尝试过更改地点,但是我不明白为什么这样做。
<select ng-model="searchCategories">
<option ng-repeat="c in recordings" value="[[ c.title ]]">[[ c.title ]]></option>
</select>
ng-repeat产生空对象,如下所示:
<option value="? object:125 ?"></option>
答案 0 :(得分:1)
我进行了搜索,并在API Select documentation of AngularJS上找到了它:
在ngRepeat和ngOptions之间选择
在许多情况下,可以在元素上使用ngRepeat而不是ngOptions来获得相似的结果。但是, ngOptions提供了一些好处:
通过选择将<select>
模型分配为理解表达式的一部分时具有更大的灵活性 通过不为每个重复的实例创建新作用域来减少内存消耗 通过在documentFragment中创建选项而不是单独创建选项来提高渲染速度 具体来说,从Chrome和Internet Explorer / Edge中的2000个选项开始,选择重复选项会大大降低速度。
因此,最好使用ngOptions代替ngRepeat
根据您的问题,我们需要指定一个默认值,以避免它生成一个空对象。
正如 Pierre Emmanuel Lalleman 在Angular的最新1.7.x版本中所说,一些基于此问题的错误已得到纠正。
我要设置1.4.8 AngularJS版本,但是当您升级到最新版本时,您会立即注意到差异。
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.searchCategories;
$scope.recordings = [
{title: 'Medical'},
{title: 'Engineering'},
{title: 'Marketing'},
{title: 'IT'},
{title: 'Videogames'},
];
$scope.setValue = function(){
$scope.searchCategories = $scope.recordings[0];
};
//With more information
$scope.data = {
availableOptions: [
{id: '1', name: 'Medical'},
{id: '2', name: 'Engineering'},
{id: '3', name: 'Marketing'}
],
selectedOption: {id: '3', name: 'Marketing'} //This sets the default value of the select in the ui
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<!-- Change to this version -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>-->
<h1>Select with AngularJS</h1>
<div ng-app="myApp" ng-controller="myCtrl">
<h5>Selected option: <label>{{searchCategories}}</label></h5>
<label>
With ng-repeat
</label>
<select ng-model="searchCategories">
<option ng-repeat="c in recordings" ng-value="{{c.title}}">{{c.title}}</option>
</select>
<br>
<label>
With ng-option
</label>
<select ng-model="searchCategories" ng-options="c as c.title for c in recordings">
</select>
<button ng-click="setValue()">
Give value by default
</button>
<br>
<label>
With ng-options, data-id and default selected option
</label>
<select
ng-options="option.name for option in data.availableOptions track by option.id"
ng-model="data.selectedOption"></select>
<br>
{{data.selectedOption}}
</div>