AngularJS создает пустой объект во время ng-repeat

#javascript #angularjs

Вопрос:

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>

1. выполняется ли интерполяция подобным [[c.title]] образом по ошибке? потому что это должно быть так {{c.title}}

2. Кстати, ng-options это лучший выбор для select чем ng-repeat . docs.angularjs.org/api/ng/directive/ngOptions

3. Какая версия angularjs? Я предполагаю, что вы изменили ‘{{‘ на ‘[[‘ через $interpolateProvider. Вы должны использовать ng-value="c.title" . Было много ошибок с обработчиками выбора / опций angularjs. В angularjs 1.7 вы должны быть в безопасности, попробуйте обновить, если это не так. ng-options НЕ ТРЕБУЕТСЯ для выполнения этой работы.

Ответ №1:

Я выполнил поиск и нашел это в документации по выбору API AngularJS:

Выбор между ngRepeat и ngOptions
Во многих случаях ngRepeat может использоваться для элементов вместо ngOptions для достижения аналогичного результата. Однако ngOptions предоставляет некоторые преимущества:
Большая гибкость в том, как <select> назначается модель с помощью select как части выражения понимания, уменьшенное потребление памяти за счет отказа от создания новой области для каждого повторяющегося экземпляра, повышенная скорость рендеринга за счет создания параметров в DocumentFragment, а не по отдельности, выбор с повторяющимися параметрами значительно замедляется, начиная с 2000 параметров в Chrome и Internet Explorer / Edge.

Поэтому гораздо лучше использовать ngOptions вместо ngRepeat
В зависимости от вашей проблемы, нам нужно указать значение по умолчанию, чтобы избежать того, что оно генерирует пустой объект.
И, как говорит Пьер Эммануэль Лаллеман в последней версии 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>

1. Спасибо за хороший ответ! Я перепробовал все ваши варианты, но в конце я обнаружил, что в массив значений действительно был вставлен пустой объект.. Я очень невнимательный