2014-03-12 54 views
1

我嘗試了AngularJS ui-select應用程序:https://github.com/angular-ui/ui-select2/tree/master/demo多選。我嘗試的具體示例是使用預定義值的多選。最初它加載兩個預選狀態。點擊一個條目,下拉菜單顯示未定義。並且模型具有兩個字符的狀態名稱。我錯過了什麼嗎?AngularJS ui-select2多選不工作

plunker鏈接:http://plnkr.co/edit/IeWSZX2MDq1GfXbm3hQB

HTML:

<input type="text" style="width:300px" ui-select2="multi" ng-model="multi2Value" /> 

段:

var states = [ 
    { text: 'Alaskan/Hawaiian Time Zone', children: [ 
    { id: 'AK', text: 'Alaska' }, 
    { id: 'HI', text: 'Hawaii' } 
    ]}, 
    { text: 'Pacific Time Zone', children: [ 
    { id: 'CA', text: 'California' }, 
    { id: 'NV', text: 'Nevada' }, 
    { id: 'OR', text: 'Oregon' }, 
    { id: 'WA', text: 'Washington' } 
    ]}, ...} 

$scope.multi2Value = [ 
    { id: 'CT', text: 'Connecticut' }, 
    { id: 'DE', text: 'Delaware' }]; 

$scope.multi = { 
    multiple: true, 
    query: function (query) { 
     query.callback({ results: states }); 
    }, 
    initSelection: function (element, callback) { 
     var val = $(element).select2('val'), 
      results = []; 
     for (var i=0; i<val.length; i++) { 
      results.push(findState(val[i])); 
     } 
     callback(results); 
    } 
}; 
+0

你可以提供一個plunker? –

回答

13

<input>字段更改爲<div>並再次嘗試。

的HTML標記應該是這樣的:

<div style="width:300px" ui-select2="multi" ng-model="multi2Value" /> 
3

你甚至可以使用select標籤爲好。我已經創造了這個plunker:

HTML:

<select multiple class="full-width" ui-select2="groupSetup" ng-model="activity.act_group_id" ng-init="activity.act_group_id=split_custom(activity.act_group_id,',',1)" data-placeholder="Select Group"> 
    <option ng-repeat="group in groups | orderBy:'text'" value="{{group.id}}">{{group.text}}</option> 
</select> 

JS:

$scope.groups = [{"text": "Group1", "id": 2}, {"text": "Group2", "id": 62}, {"text": "Group3", "id": 68}, {"text": "Group4", "id": 74}, {"text": "Group5", "id": 98}, {"text": "Group6", "id": 104}, {"text": "Group7", "id": 107}, {"text": "Group8", "id": 139}, {"text": "Group9", "id": 149}, {"text": "Group10", "id": 154}]; 
$scope.groupSetup = { 
    multiple: true, 
    formatSearching: 'Searching the group...', 
    formatNoMatches: 'No group found' 
}; 

http://plnkr.co/edit/dpX7jNkEgRoPyRZpJV92?p=preview

+0

如何設置一些默認選項? – PeterPan

+0

@PeterPan:轉到plunker並查看默認情況下選擇了一些組。這是通過調用ng-init上的split_custom js函數來完成的,該函數用於選擇要選擇的選項。請深入瞭解代碼並告訴我如果我可以幫助您更多地進行調試。 –