需要 AngularJS 输入表单中选择用法的示例 [英] Need example of select usage in AngularJS input form

问题描述

我正在尝试使用一组对象

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

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

解决方案

我建议尽可能使用 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: '酒吧' }];$scope.selectedItem = null;});

<选择 ng-model="selectedItem"ng-options="item as item.name for item in items"></select>{{选定项目 |json}}

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

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

这确实是最好的方法.

根据要求提供更多上下文.另外这里有一个plunker显示它正在使用中

I am attempting to use an array of objects

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

as a drop-down selection within an AngularJS input form, and I need an example badly. Can anyone point me to a jsFiddle that can enlighten me?

解决方案

I would recommend using ng-options where you can.

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

Because check this out: You can use it to select actual objects:

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>

In the above example when you select something from the drop down, it's actually setting an entire object reference on selectedItem rather that just a value type.

NOTE: using ng-options sets your value="" attributes to the indices of the items in your collections this is by design.

It's really the best way to do it.

EDIT: more context as requested. Also here's a plunker showing it in use

这篇关于需要 AngularJS 输入表单中选择用法的示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！