CODEWITHSUNDEEP
angularjs
Michael
Michael

Reputation: 13636

How to make ng-select work properly

I have this ng-select element:

  <body ng-controller="MainCtrl">
    <select ng-model="selectedItem"  ng-model="selectedItem">
      <option value="-1" selected>- manual -</option>
      <option ng-repeat="(key, value) in items">{{value.Name}}</option>
    </select>
  </body>

Here is controller:

  $scope.selectedItem = null;
  $scope.items = [{Name: 'one', Id: 30 },
                  {Name: 'two', Id: 27 },
                  {Name: 'threex', Id: 50 }];

Here is working PLUNKER.

Inside of ng-select I have two options the static(-manual-) and the options generated by ng-repeat element.

My problem is: when user make selection of the option generated by ng-repeat the $scop.selectedItem get the Name of the selected item, while I need to set the Id of the selected element.

For example:

If in the plunker above user select from ng-select element two the $scop.selectedItem will get two the name of the item while, I need $scop.selectedItem to get 27 the Id of the selected item.

Any idea how can I make $scop.selectedItem to get the Id of the selected item?

Upvotes: 0

Views: 121

Answers (4)

Mistalis
Mistalis

Reputation: 18309

I would suggest to use ng-options and to push your default value (manual) in $scope.items.

I used ng-init to set the default value of your select to - manual -.

<body ng-controller="MainCtrl">
    <select ng-model="selectedItem" ng-options="i.Id as i.Name for i in items" ng-init="selectedItem = items[0].Id"></select>
    selected item: {{selectedItem}}
</body>

$scope.items = [{Name:'- manual -', Id: -1},
                {Name: 'one', Id: 30 },
                {Name: 'two', Id: 27 },
                {Name: 'threex', Id: 50 }];

Here is a working Plnkr.

Upvotes: 0

sisyphus
sisyphus

Reputation: 462

Try this

 <option ng-repeat="(key, value) in items" key="{{value.Id}}" value="{{value.Id}}">{{value.Name}}</option>

All that I have done is I have set key and value = {{value.Id}} and the selectedItem will pick it up.

Here's the UPDATED PLNKR

Upvotes: 0

Pjetr
Pjetr

Reputation: 1382

As Delapouite said, you should use ng-options. I've updated your plunkr to implement this.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  
  $scope.items = [{name: '- manual -', id: -1 },
                  {name: 'one', id: 30 },
                  {name: 'two', id: 27 },
                  {name: 'threex', id: 50 }];
  $scope.selectedItem = $scope.items[0];
  
});
<select 
      ng-model="selectedItem"
      ng-options="item.name for item in items track by item.id"
    ></select>

Upvotes: 1

Delapouite
Delapouite

Reputation: 10197

Have a look at the ng-options directive. You can pass a list comprehension like expression to extract what you need.

For example:

<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>

https://docs.angularjs.org/api/ng/directive/ngOptions

Upvotes: 1

Related Questions