Javascript 使用angular js的多选下拉复选框

我想设计一个下拉列表的复选框，使复选框多选择。我已经使用了下面的代码，但我无法进行多次选择，因为每次单击复选框时模板都会刷新，请提供一些建议

{   <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> 
}

{


{{DataValue.displayText}


}

您可以使用类似于angularjs下拉式multiselect的指令，您可以在internet上很容易找到它

以下是一些示例：

angularjs下拉多选

多选下拉列表-

angularjs下拉多选的另一个示例

代码段：

var myApp=angular.module（'exampleApp'，['angularjs-dropdown-multiselect']）；
myApp.controller（'appController'，['$scope'，'，
职能（$范围）{
$scope.example13model=[]；
$scope.example13数据=[{
id:1，
标签：“大卫”
}, {
id:2，
标签：“Jhon”
}, {
id:3，
标签：“丽莎”
}, {
id:4，
标签：“妮可”
}, {
id:5，
标签：“丹尼”
}];
$scope.example13设置={
smartButtonMaxItems:3，
SmartButtonExtConverter:函数（itemText，originalItem）{
如果（itemText=='Jhon'）{
返回'Jhonny！'；
}
返回itemText；
}
};
}
]);
div，h1，a{
填充物：5px；
}

Sytited angularjs下拉列表multiselect示例
我发现一个简单的解决方法是使用
自动关闭=“outsideClick”
代码如下：

<div class="dropdown" uib-dropdown auto-close="outsideClick" on-toggle="toggled(open)">
  <a class="btn btn-primary" uib-dropdown-toggle>Toggle</a>
  <ul class="dropdown-menu status-select" class="status-select" ng-if="$index == selectedFilterIndex" uib-dropdown-menu>
    <li ng-repeat="DataValue in filter.Data.Value">
      <div class="checkbox">
        <label>
          <input type="checkbox" ng-click="OnDropDownSelectionChanged(filter,DataValue)">
                      {{DataValue.displayText}}
        </label>
      </div>
    </li>
  </ul>
</div>


切换


{{DataValue.displayText}


您可以选择角材料设计库

检查此链接，您好，但他们在那里使用了一些“bower”库代码，我只想在angular中实现。@Bonyjose您不需要bower，还有一个选项可以下载
.zip
。@Shekhar Swami您编辑的
{}
来自哪里？@ShekharSwami请不要进行您不确定的编辑。它不是必需的，也不是有效的。数字3非常棒！记住不要在实际项目中使用外部脚本。有人可能会给你的外部LIB注入一些疯狂的东西……（中间人攻击）嗨，我想添加按钮点击事件，你能告诉我如何设置它吗？我创建了一个事件，但它没有击中你能解决我吗