在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中從下拉列表中選擇多個選項

回答

相關問題