My array of objects is not working correctly with my ng-select?

Question

I have this array of objects:

var abc = [
   {"id":28,"name":"Actions, State & Occurences"},     
   {"id":29,"name":"Descriptive Words & Modifiers"}  
   {"id":30,"name":"Counting & Measurement"},
   {"id":31,"name":"Time & Dates"}]

Here's the select I am using:

   {{ row.categoryId }}
   <select class="select"
           convert-to-number
           ng-options="option.name for option in abc track by option.id"
           ng-model="row.categoryId"></select>

The problem I have is that the row.categoryId is a number and the correct value is not being selected. When I do select a value here's what my row.categoryId gets set to:

  {"id":28,"name":"Actions, State & Occurences"}

Can someone tell me is there a way I can make this work correctly so that it sets and uses the id value instead of the object?

Abdul Mateen Mohammed · Accepted Answer · 2016-09-11 17:59:34Z

@Alan, you can use the as clause in the ng-options directive in order to tell AngularJS what you want to be set into the variable used in the ng-model directive.

Check the below example(the selected option doesn't appear maybe problem with the version it works here), here from the option object in the ctrl.abc array the id property is set (selected) into the ctrl.row.categoryId and the name property is displayed to the user.

You can find more information about ng-options here

angular
   .module('demo', [])
   .controller('DefaultController', DefaultController);
  
  function DefaultController() {
    var vm = this;
    vm.abc = [
    { "id":28,"name":"Actions, State & Occurences" },
    { "id":29,"name":"Descriptive Words & Modifiers" },
    { "id":30,"name":"Counting & Measurement" },
    { "id":31,"name":"Time & Dates" }];
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    {{ ctrl.row.categoryId }}
    <select class="select"
           convert-to-number
           ng-options="option.id as option.name for option in ctrl.abc track by option.id"
           ng-model="ctrl.row.categoryId">
    </select>
  </div>
</div>

You don't need to use track by if you will be setting the selected option in the select element using the exact same property value which you get from the ng-options directive when a user selects an option.

Check the below sample which sets a selected option using an id of the item. If you would want to set the selected option using a different property than the id property then you can use the track by clause in the ng-options directive.

 angular
   .module('demo', [])
   .controller('DefaultController', DefaultController);

function DefaultController() {
  var vm = this;
  vm.abc = [
    {"id":28,"name":"Actions, State & Occurences"},
    {"id":29,"name":"Descriptive Words & Modifiers"},
    {"id":30,"name":"Counting & Measurement"},
    {"id":31,"name":"Time & Dates"}];
  
  setItem();
  
  function setItem() {
    vm.row = {
      categoryId: 30
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    {{ctrl.row.categoryId}}
    <select class="select"
           convert-to-number
           ng-options="option.id as option.name for option in ctrl.abc"
           ng-model="ctrl.row.categoryId">
    </select>
  </div>
</div>

RIYAJ KHAN · Accepted Answer · 2016-09-11 17:37:51Z

1

ng-options="option.id as option.name for option  in abc track by option.id"

Working Plunker

answered Sep 11, 2016 at 17:37

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

Comments

Shijil Narayanan · Accepted Answer · 2016-09-11 17:57:57Z

0

Use $scope.abc instead of var abc. and replace your select tag with this

 <select class="select"  ng-options="option  as option.name for option in abc track by option.id"
       ng-model="row.categoryId"></select>

And if you need the first value to be pre-selected inside the select tag kindly assign the ng-model to first value of the array like this $scope.row.categoryId = $scope.abc[0]; That should fix your problem

answered Sep 11, 2016 at 17:57

Shijil Narayanan

1,01910 silver badges21 bronze badges

Collectives™ on Stack Overflow

My array of objects is not working correctly with my ng-select?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related