使用angular js的multiselectable下拉复选框

Question

我想设计一个复选框下拉列表，并使复选框为多选。我使用了下面的代码，但是由于每次单击复选框时模板都会刷新，因此无法进行多项选择，请提出一些建议吗？

{   <ul class="status-select" class="status-select" ng-if="$index == selectedFilterIndex">
     <li ng-repeat="DataValue in filter.Data.Value">
        <input type="checkbox" ng-click="OnDropDownSelectionChanged(filter,DataValue)">
                        {{DataValue.displayText}}
     </li>
     </ul> 
}

Answer 1

您可以使用诸如 angularjs-dropdown-multiselect之类的 指令，您可以在互联网上很容易找到它

以下是一些示例：

1. angularjs-下拉菜单，多选 - 小提琴

2. multiselectDropdown - 小提琴

3. angularjs-下拉菜单，多选的另一个例子 - 小提琴

代码段：

var myApp = angular.module('exampleApp', ['angularjs-dropdown-multiselect']);

myApp.controller('appController', ['$scope',
  function($scope) {

    $scope.example13model = [];
    $scope.example13data = [{
      id: 1,
      label: "David"
    }, {
      id: 2,
      label: "Jhon"
    }, {
      id: 3,
      label: "Lisa"
    }, {
      id: 4,
      label: "Nicole"
    }, {
      id: 5,
      label: "Danny"
    }];

    $scope.example13settings = {
      smartButtonMaxItems: 3,
      smartButtonTextConverter: function(itemText, originalItem) {
        if (itemText === 'Jhon') {
          return 'Jhonny!';
        }

        return itemText;
      }
    };
  }
]);


div, h1, a {
  padding: 5px;
}


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<link href="https://bootswatch.com/slate/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-dropdown-multiselect/1.2.0/angularjs-dropdown-multiselect.min.js"></script>

<h2>
    Example of sytled angularjs-dropdown-multiselect  
</h2>

<a href="http://dotansimha.github.io/angularjs-dropdown-multiselect/#/">Source documentation</a>

<div ng-app="exampleApp" ng-controller="appController">

  <div ng-dropdown-multiselect="" options="example13data" selected-model="example13model" extra-settings="example13settings"></div>

</div>