Angular js选择绑定

时间:2014-07-16 21:50:04

标签: javascript angularjs

我已经看过很多关于如何做到这一点的例子,但似乎仍无法弄明白。 我已经设置了一个非常简单的角度应用程序与控制器,我试图填充一个选择标签。

<body data-ng-app="App">
<div data-ng-controller="DemoController">
    {{var}}
    <select data-ng-options="v.id as v.name for v in selectVals">
        <option value="">Select</option>
    </select>
</div>
</body>

angular.module('App', []).controller('DemoController', function($scope) {
        $scope.var = 'a';
        $scope.selectVals = [
            { name: '1st', id: 1 }, 
            { name: '2nd', id: 2 }
        ];
});

这是jsFiddle:http://jsfiddle.net/Fc5ne/3/ 任何帮助将不胜感激。

我已经查看了这些地方,并尝试比较我的代码,但仍遗漏了一些内容:https://docs.angularjs.org/api/ng/directive/selecthttp://jsfiddle.net/qWzTb/http://jsfiddle.net/qm7E7/19/Angular: Binding objects to <select>,... as以及其他一些堆栈溢出问题。

2 个答案:

答案 0 :(得分:6)

这是一个棘手的问题。 ng-model指令也是必需的。请放心,许多其他人(包括我自己)都因此被烧毁。

<select data-ng-model="test" data-ng-options="v as v.name for v in selectVals"></select>

http://jsfiddle.net/Fc5ne/4/

答案 1 :(得分:1)

要设置select元素的 选项 ,可以使用ng-options指令。 对于 选定值 ,可以使用ng-model指令。

jsfiddle:http://jsfiddle.net/rpaul/j5ewuek5/