在AngularJs中从下拉列表中选择多个选项

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

//Controller 
$scope.data = [{id: 1, Country: Zambia}, 
       {id: 2, Country: United Kingdom} 
       {id: 3, Country: USA}] 

$scope.selectedCountry = []; 


//view 
    <select name="multipleSelect" id="multipleSelect" ng-model=" selectedCountry" multiple 
     ng-options="country.country as country.country for country in data"></select> 
<h4> {{selectedCountry}}</h4>

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

问题所在。现在我遇到的问题是，当我从下拉列表中选择选项时，我需要能够在selectedCountry数组中传递id和国家，而不仅仅是国家。因此，例如在上述情况下，当你选择第一个国家时，通过selectedCountry Array传递的信息将是这样的[“赞比亚”]，但我真正想要的是这样的事情 [{id: 1, Country Zambia}].

为了解决这个问题，我试图做到这一点的看法：

<select name="multipleSelect" id="multipleSelect" ng-model=" selectedCountry" multiple 
     ng-options="{Id: country.Id, Country: country.country } as country.country for country in data"></select> 
<h4> {{selectedCountry}}</h4>

运作良好，并传递给SELECTEDCOUNTRY阵列中的数据就像是{id: 1, Country: zambia}的对象，但问题是，我不能选择从下拉菜单中的多个选项我只能选择1个选项。我在做什么错？什么是实现这个目标的最好方法？谢谢

来源

2016-06-09 1future

我发现在你的代码的一些错误：

你的JSON数据是无效的。 JSON字符串值必须在双重的报价中，对于密钥{"key":"value"}也是如此。数组中的每个项目都必须用逗号分隔。
国家名称的正确关键是“国家”。

我正在使用Angular 1.4.8。 country.Country for country in data

事情是这样的：

(function() { 
 

 
    var app = angular.module("app", []); 
 

 
    app.controller("controller", ["$scope", 
 
    function($scope) { 
 
     $scope.selectedCountry = []; 
 
     $scope.data = [{ 
 
     "id": 1, 
 
     "Country": "Zambia" 
 
     }, { 
 
     "id": 2, 
 
     "Country": "United Kingdom" 
 
     }, { 
 
     "id": 3, 
 
     "Country": "USA" 
 
     }]; 
 
    } 
 
    ]); 
 

 
})();

div { 
 
    margin: 2px; 
 
} 
 
.largeversion { 
 
    border: solid 1px #FF0000; 
 
} 
 
.shortversion { 
 
    border: solid 1px #005500; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script> 
 

 
<div data-ng-app="app"> 
 
    <div data-ng-controller="controller"> 
 
    <div class="largeversion"> 
 
     <pre>ng-options="{Id: country.Id, Country: country.Country } as country.Country for country in data"</pre> 
 
     <select name="multipleSelect" id="multipleSelect" ng-model=" selectedCountry" multiple ng-options="{Id: country.Id, Country: country.Country } as country.Country for country in data"></select> 
 

 
    </div> 
 
    <div class="shortversion"> 
 
     <pre>ng-options="country.Country for country in data"</pre> 
 
     <select name="multipleSelect" id="multipleSelect" ng-model=" selectedCountry" multiple ng-options="country.Country for country in data"></select> 
 

 
    </div> 
 
    <h4> {{selectedCountry}}</h4> 
 
    </div> 
 
</div>

您可以通过使用代码的短版

来源

2016-06-09 20:12:06

在AngularJs中从下拉列表中选择多个选项

回答

相关问题