CODEWITHSUNDEEP
javascriptangularjs
Konstantin Kozirev
Konstantin Kozirev

Reputation: 1262

AngularJS creates empty object while ng-repeat

ng-repeat creates empty object, when using with <select> and <option>. However, the array looks normal. Every element is defined, no empty elements.

I've tried change places, but I don't understand why it works so.

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

ng-repeat produces empty object, like this: <option value="? object:125 ?"></option>

Upvotes: 0

Views: 290

Answers (1)

Ivan-San
Ivan-San

Reputation: 843

I have made a search and found this on the 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.

So it's much better to use ngOptions instead of ngRepeat
Based on your problem, we need to specify a default value to avoid that it generates an empty object.
And as Pierre Emmanuel Lalleman says in the latest 1.7.x version of Angular, some bugs based on this problem are corrected. I'm gonna set the 1.4.8 AngularJS version, but when you upgrade to the last version you will notice immediately the difference.

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>

Upvotes: 1

Related Questions