多选择下拉复选框使用角度 [英] multiselectable dropdown checkboxes using angular js

问题描述

我想设计一个复选框的下拉列表，并使复选框可多选。我使用了以下代码，但是我无法做多个选择作为模板刷新每次我点击一个复选框，请提出一些想法？

  {< ul class =status-selectclass =status-selectng-if =$ index == selectedFilterIndex> 
< li ng-repeat =filter.Data.Value中的DataValue> 
< input type =checkboxng-click =OnDropDownSelectionChanged（filter，DataValue）> 
 {{DataValue.displayText}} 
< / li> 
< / ul> 
} 
  

解决方案

以下是一些示例：

1. angularjs-dropdown-multiselect - 小提琴




2. multiselectDropdown - 小提琴




3. angularjs-dropdown-multiselect的另一个示例 - 小提琴

代码段：

  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; }}; }]）;  

 < script src = //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>< link href =https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css =stylesheet/>< script src =https://rawgit.com/ dotansimha / angularjs-dropdown-multiselect / master / src / angularjs-dropdown-multiselect.js>< / script>< h2> sytled angularjs-dropdown-multiselect的示例< / h2>< a href =http://dotansimha.github.io/angularjs-dropdown-multiselect/#/>源文档< / a>< divng -app =exampleAppng-controller =appController> < div ng-dropdown-multiselect =options =example13dataselected-model =example13modelextra-settings =example13settings>< / div>< / div>  / pre> 

I want to design a dropdownlist of checkboxes and make the checkboxes multi-selectable. I have used the below code,but I am unable to make multiple selections as the template refreshes each time I click on a checkbox,please suggest some ideas?

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

解决方案

You can use directive like angularjs-dropdown-multiselect, which you can find very easily on internet

Here are some example:

1. angularjs-dropdown-multiselect - Fiddle

2. multiselectDropdown - Fiddle

3. Another example of angularjs-dropdown-multiselect - Fiddle

Code Snippet:

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;
      }
    };
  }
]);

<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>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://rawgit.com/dotansimha/angularjs-dropdown-multiselect/master/src/angularjs-dropdown-multiselect.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>

这篇关于多选择下拉复选框使用角度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！