CODEWITHSUNDEEP
angularjs
gaurav bhavsar
gaurav bhavsar

Reputation: 2043

How to use ng-options in angular where Label and value are same

I am trying to create dropdown using ng-options, but at edit page its not working.

js file :

$scope.items = [
    {name:"Angular"},
    {name:"java script"},
    {name:"Css3"},
    {name:"Html5"},
];

$scope.name= "Css3";

html file :

<div class="form-group">Name</label>
        <select class="form-control" ng-model="name" ng-options="a.name for a in items track by a.name" placeholder="Select Item"></select>
</div>

its working fine. but I got selected value like this :

name:{
     name:"selectedValue"
}

but I want like this :

name:"selectedValue"
in $scope.selected after selected value from dropdown.

and I referred this blog

after comparing @Satpal's demo and my output by inspect element and getting this :

my output

<select class="form-control ng-pristine ng-valid" ng-model="name" ng-options="a.name as a.name for a in items" placeholder="Select Item">
    <option value="0" selected="selected" label="Angular">Angular</option>
    <option value="1" label="java script">java script</option>
    <option value="2" selected="selected" label="Css3">Css3</option>
    <option value="3">Html5</option>
</select>

Satpal's output:

<select class="form-control ng-pristine ng-valid" ng-model="name" ng-options="a.name as a.name for a in items" placeholder="Select Item">
    <option value="0">Angular</option>
    <option value="1">java script</option>
    <option value="2" selected="selected">Css3</option>
    <option value="3">Html5</option>
</select>

Upvotes: 1

Views: 1581

Answers (1)

Satpal
Satpal

Reputation: 133403

Use the following expression of ngOption

select as label for value in array

Code

a.name as a.name for a in items

DEMO

Upvotes: 3

Related Questions