CODEWITHSUNDEEP
javascriptangularjsng-options
Sami
Sami

Reputation: 2331

What is the correct syntax in AngularJS' ng-options?

I got an array from rest-service and I am trying to create an option/dropdown from that data.

jsfiddle

$scope.reasons = [{
"languageLanguageId": {
    "languageId": 1,
    "lastUpdate": "2015-05-08T11:14:00+03:00",
    "name": "eng"
},
"returnText": "reason1",
"returnreasonId": 1}, {
"languageLanguageId": {
    "languageId": 1,
    "lastUpdate": "2015-05-08T11:14:00+03:00",
    "name": "eng"
},
"returnText": "reason2",
"returnreasonId": 2}, {
"languageLanguageId": {
    "languageId": 1,
    "lastUpdate": "2015-05-08T11:14:00+03:00",
    "name": "eng"
},
"returnText": "reason3",
"returnreasonId": 3

}];

HTML

<div class="col-md-10">
<select ng-model="reasons" ng-options="p.reason as (p.returnText + '('+p.returnreasonId+')') for p in reasons"></select>
</div>


<div class="col-md-10">
    <select ng-model="reasons" ng-options="p.returnreasonId as p.returnText for p in reasons"></select>
    </div>

Upvotes: 2

Views: 108

Answers (1)

Juan Marcos Armella
Juan Marcos Armella

Reputation: 737

You miss ng-app and the controller declaration:

<div ng-app>
   <div  ng-controller="TodoCtrl">
         <div class="col-md-10">
            <select ng-model="reason"  ng-options="p.returnreasonId as p.returnText for p in reasons"></select>
             {{reason}}
        </div>
    </div>
</div>

And the controller:

function TodoCtrl($scope) {
$scope.reasons = [{
    "languageLanguageId": {
        "languageId": 1,
            "lastUpdate": "2015-05-08T11:14:00+03:00",
            "name": "eng"
    },
        "returnText": "reason1",
        "returnreasonId": 1
}, {
    "languageLanguageId": {
        "languageId": 1,
            "lastUpdate": "2015-05-08T11:14:00+03:00",
            "name": "eng"
    },
        "returnText": "reason2",
        "returnreasonId": 2
}, {
    "languageLanguageId": {
        "languageId": 1,
            "lastUpdate": "2015-05-08T11:14:00+03:00",
            "name": "eng"
    },
        "returnText": "reason3",
        "returnreasonId": 3
}];
}

EDIT:

I was mading a mistake. In ng-model you put where do you want to store the selected value. In ng-options you put all the values you can select. Hope this help you.

http://jsfiddle.net/U3pVM/15559/

Check the docs for more info:

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

Upvotes: 1

Related Questions