AngularJS的ng-options中的正确语法是什么?

时间:2015-05-11 19:00:11

标签: javascript angularjs ng-options

我从rest-service获得了一个数组,我正在尝试从该数据创建一个选项/下拉列表。

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>

1 个答案:

答案 0 :(得分:1)

您错过了ng-app和控制器声明:

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

控制器:

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
}];
}

编辑:

我错了。在ng-model中,您可以放置​​要存储所选值的位置。在ng-options中,您可以选择所有可以选择的值。希望这能帮助你。

github repo

查看文档以获取更多信息:

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