javascript - AngularJS 在 ng-repeat 时创建空对象

Question

ng-repeat 与 <select> 一起使用时会创建空对象和<option> 。 然而，该阵列看起来很正常。每个元素都已定义，没有空元素。

我尝试过换地方，但我不明白为什么会这样。

<select ng-model="searchCategories">
   <option ng-repeat="c in recordings" value="[[ c.title ]]">[[ c.title ]]></option>
</select>

ng-repeat 产生空对象，如下所示: <option value="? object:125 ?"></option>

Answer 1

我进行了搜索并在API Select documentation of AngularJS上找到了这个:

Choosing between ngRepeat and ngOptions
In many cases, ngRepeat can be used on elements instead of ngOptions to achieve a similar result. However, ngOptions provides some benefits:
More flexibility in how the <select> model is assigned via the select as part of the comprehension expression reduced memory consumption by not creating a new scope for each repeated instance increased render speed by creating the options in a documentFragment instead of individually Specifically, select with repeated options slows down significantly starting at 2000 options in Chrome and Internet Explorer / Edge.

所以使用 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>