如何从angularjs中的下拉列表中选择多个选项 [英] How to select multiple options from dropdown list in angularjs

问题描述

大家好，



在我的项目中，我需要从下拉列表中选择多个选项。我的代码看起来像这样：

Hi All,

In my project, i need to select multiple options from a drop down. My code looks something like this:

//controller
$scope.data = [{id: 1, Colour: Red},
              {id: 2, Colour: Blue},
              {id: 3, Colour:Green}]

$scope.selectedCountry = [];

//view
   <select name="multipleSelect" id="multipleSelect" ng-model=" selectedColour" multiple

      ng-options="colour.Colour as colour.Colour for colour in data"></select>
<h4> {{selectedColour}}</h4>

上面的上下文有效我可以从下拉列表中选择多个选项。这个链接帮助我实现了这个目标。

ANgular Docs



问题。



现在我遇到的问题是，当我从下拉列表中选择选项时，我需要能够在selectedColour数组中传递id和Color而不是只是颜色。所以例如在上面的上下文中，当你选择第一个Color时，传递给selectedColour数组的信息就像这个[Red]，但我真正想要的是这样的[{id： 1，颜色：红色}]



我尝试过：



为了解决这个问题，我尝试在视图中执行此操作：



< select name =multipleSelectid =multipleSelectng-model = selectedColour倍数

ng-options ={Id：colour.Id，Color：colour.Colour} as colour.Colour for color in data

{{selectedColour}}

运行良好，传递给selectedColour数组的数据是{id}之类的对象：1，颜色：红色}但问题是我无法从下拉列表中选择多个选项我只能选择1个选项。

我做错了什么？什么是实现这一目标的最佳方法？

谢谢

The context above works and i can select multiple options from the dropdown. This link helped me to achieve this.
ANgular Docs

The problem.

Now the problem i'm having is that when i select the options from the dropdown i need to be able to pass the id and Colour in the selectedColour array and not just the Colour. so for instance in the above context when you select the first Colour , the information passed through the to the selectedColour Array will be something like this ["Red"] but really what i'm looking for is something like this [{id: "1", Colour: "Red"}]

What I have tried:

To solve this problem i attempted to do this in the view:

<select name="multipleSelect" id="multipleSelect" ng-model=" selectedColour" multiple
ng-options="{Id: colour.Id, Colour: colour.Colour } as colour.Colour for colour in data"

{{selectedColour}}

That worked well and the data passed to the selectedColour array is an object like {id: 1, Colour: Red} but the issue is that i cannot select multiple options from the dropdown i can only select 1 option.
What am i doing wrong? and what is the best way to achieve this?
Thank you

推荐答案

scope.data = [{id： 1 ，颜色：红色}，
{id： 2 ，颜色：蓝色}，
{id： 3 ，颜色：绿色}]

scope.data = [{id: 1, Colour: Red}, {id: 2, Colour: Blue}, {id: 3, Colour:Green}]

scope.selectedCountry = [];

scope.selectedCountry = [];

//view
   <select name="multipleSelect" id="multipleSelect" ng-model=" selectedColour" multiple

      ng-options="colour.Colour as colour.Colour for colour in data"></select>
<h4> {{selectedColour}}</h4>

上面的上下文工作，我可以从下拉列表中选择多个选项。这个链接帮助我实现了这个目标。

ANgular Docs



问题。



现在我遇到的问题是，当我从下拉列表中选择选项时，我需要能够在selectedColour数组中传递id和Color而不是只是颜色。所以例如在上面的上下文中，当你选择第一个Color时，传递给selectedColour数组的信息就像这个[Red]，但我真正想要的是这样的[{id： 1，颜色：红色}]



我尝试过：



为了解决这个问题，我尝试在视图中执行此操作：



< select name =multipleSelectid =multipleSelectng-model = selectedColour倍数

ng-options ={Id：colour.Id，Color：colour.Colour} as colour.Colour for color in data

{{selectedColour}}

运行良好，传递给selectedColour数组的数据是{id}之类的对象：1，颜色：红色}但问题是我无法从下拉列表中选择多个选项我只能选择1个选项。

我做错了什么？什么是实现这一目标的最佳方法？

谢谢

The context above works and i can select multiple options from the dropdown. This link helped me to achieve this.
ANgular Docs

The problem.

Now the problem i'm having is that when i select the options from the dropdown i need to be able to pass the id and Colour in the selectedColour array and not just the Colour. so for instance in the above context when you select the first Colour , the information passed through the to the selectedColour Array will be something like this ["Red"] but really what i'm looking for is something like this [{id: "1", Colour: "Red"}]

What I have tried:

To solve this problem i attempted to do this in the view:

<select name="multipleSelect" id="multipleSelect" ng-model=" selectedColour" multiple
ng-options="{Id: colour.Id, Colour: colour.Colour } as colour.Colour for colour in data"

{{selectedColour}}

That worked well and the data passed to the selectedColour array is an object like {id: 1, Colour: Red} but the issue is that i cannot select multiple options from the dropdown i can only select 1 option.
What am i doing wrong? and what is the best way to achieve this?
Thank you

试试这个

try this

<select name="multipleSelect" id="multipleSelect" ng-model="selectedColour" multiple   ng-options="colour.Colour for colour in data"> </select>
       <h4> {{selectedColour}}</h4>

这篇关于如何从angularjs中的下拉列表中选择多个选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！