CODEWITHSUNDEEP
angularjs
Alan2
Alan2

Reputation: 24552

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?

Upvotes: 2

Views: 38

Answers (3)

Abdul Mateen Mohammed
Abdul Mateen Mohammed

Reputation: 1894

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

Upvotes: 2

Shijil Narayanan
Shijil Narayanan

Reputation: 1019

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

Upvotes: 0

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

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

Working Plunker

Upvotes: 1

Related Questions