angularjs - 需要 AngularJS 输入表单中的选择用法示例

Question

我正在尝试使用一组对象

 (array = [{name: 'Moe', id:1}, {name: 'Larry', id:2}, {name: 'Curly', id:3}]) 

作为 AngularJS 输入表单中的下拉选择，我非常需要一个示例。谁能指点我一个可以启发我的jsFiddle？

Answer 1

我建议尽可能使用 ng-options。

<select ng-model="choice" ng-options="x.id as x.name for x in array"></select>

因为检查一下：您可以使用它来选择实际对象：

app.controller('ExampleCtrl', function($scope) {
    $scope.items = [
        { id: 1, name: 'Foo' },
        { id: 2, name: 'Bar' }
    ];

    $scope.selectedItem = null;
});

<div ng-controller="ExampleCtrl">
    <select ng-model="selectedItem" 
            ng-options="item as item.name for item in items"></select>

    {{selectedItem | json}}
</div>

在上面的示例中，当您从下拉列表中选择某些内容时，它实际上是在 selectedItem 上设置整个对象引用，而不仅仅是一个值类型。

注意：使用 ng-options 将您的value=""属性设置为集合中项目的索引，这是设计使然。

这确实是最好的方法。

编辑：根据要求提供更多上下文。这里还有一个 plunker 显示它正在使用中

Answer 2

<select ng-model="choice">
    <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>

或使用'ng-options' - http://docs.angularjs.org/api/ng.directive:select

Answer 3

<dropdown-multiselect pre-selected="member.roles" model="selected_items" options="roles"></dropdown-multiselect>


<pre>selected roles = {{selected_items | json}}</pre>