Alan Alan - 2 months ago 7
AngularJS Question

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

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?

Answer

@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>

Comments