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

exp*_*ner 24 angularjs

我试图使用一组对象

 (array = [{name: 'Moe', id:1}, {name: 'Larry', id:2}, {name: 'Curly', id:3}]) 
Run Code Online (Sandbox Code Playgroud)

作为AngularJS输入表单中的下拉选择,我需要一个例子.任何人都可以指向一个可以启发我的jsFiddle吗?

Ben*_*esh 87

我建议你尽可能使用ng-options.

<select ng-model="choice" ng-options="x.id as x.name for x in array"></select>
Run Code Online (Sandbox Code Playgroud)

因为检查一下:你可以用它来选择实际的对象:

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

    $scope.selectedItem = null;
});
Run Code Online (Sandbox Code Playgroud)
<div ng-controller="ExampleCtrl">
    <select ng-model="selectedItem" 
            ng-options="item as item.name for item in items"></select>

    {{selectedItem | json}}
</div>
Run Code Online (Sandbox Code Playgroud)

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

注意:使用ng-options将value=""属性设置为集合中项目的索引,这是设计的.

这真的是最好的方法.

编辑:根据要求提供更多上下文.这里还有一个使用它的plunker

  • 所以ng-options就是这样......`[value]作为[collection]中[variable]的[text],所以`item作为项目中item项的名称`与`x作为x相同.name中的.name. (6认同)
  • @BenLesh - 我只是想说你的简单解释和伪代码帮我解释了一下,详细解释的页面没有做到.他们应该将这一行添加到文档中.谢谢!! (3认同)

Gal*_*aim 21

<select ng-model="choice">
    <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>
Run Code Online (Sandbox Code Playgroud)

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

  • 没有理由拒绝这个答案......它会工作得很好,在某些情况下它可能是人们想要的. (2认同)