多重选择不起作用:angularjs

时间:2018-02-16 12:57:38

标签: angularjs

我尝试使用ui-select2一次选择多个值,为此我添加了一些angular-js脚本,如

    <link rel="stylesheet" href="<?php echo base_url(); ?>angular-js/bower_components/select2/select2.css">
    <script type="text/javascript" src="<?= base_url() ?>angular-js/bower_components/jquery/jquery.js"></script>
    <script type="text/javascript" src="<?= base_url() ?>angular-js/bower_components/select2/select2.js"></script>
    <script type="text/javascript" src="<?= base_url() ?>angular-js/bower_components/angular/angular.js"></script>
    <script type="text/javascript" src="<?= base_url() ?>angular-js/bower_components/angular-ui-select2/src/select2.js"></script>

和html代码

<select multiple="multiple" ui-select2 ng-model="submitAdsFormData.city_id" ng-init="get_city_by_search()"  style="width:300px" required>
<option value="{{x.name}}" ng-repeat ="x in searchResult">{{x.name}}</option>
</select>

例如,我想要这种类型的选择 https://jsfiddle.net/NathanFriend/rLmztr2d/但是在angularjs。

但是没有选择多个值。任何人都可以帮我解决这个问题。 提前谢谢。

1 个答案:

答案 0 :(得分:0)

为此你需要将JSON设置传递给ui-select2,如

<select multiple="multiple" ui-select2="multiSetup" ng-model="submitAdsFormData.city_id" ng-init="get_city_by_search()"  style="width:300px" required>
<option value="{{x.name}}" ng-repeat ="x in searchResult">{{x.name}}</option>
</select>

并在控制器中

$scope.searchResult = [{"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.multiSetup = {
    multiple: true,
    formatSearching: 'Searching the group...',
    formatNoMatches: 'No group found'
};

工作plunker