带有复选框的多选下拉列表 角度JS.



是否有任何标签可以在不编写 AngularJS 指令的情况下创建带有复选框的多选下拉列表?谢谢。

AngularJS 下拉列表多选

// HTML
    <div ng-dropdown-multiselect="" options="example8data" selected-
      model="example8model" extra-settings="example8settings">
    </div>
// JavaScript
 $scope.example8model = [];
 $scope.example8data = [ 
                {id: 1, label: "David"},
                {id: 2, label: "Jhon"},
                {id: 3, label: "Danny"}
                ];
               $scope.example8settings = { checkBoxes: true, };

不是标准编号。您可以创建自己的指令,或者如果您不想像您所说的那样编写自己的指令,则可以使用切除指令。

查看 AngularJS 下拉列表多选,并使用选项 checkboxes .

您还可以管理类似在下面的演示中实现的内容。

'use strict';
angular.module('multiSelectDemo', [ 'shalotelli-angular-multiselect' ])
.controller('MainCtrl', [ '$scope', function ($scope) {
  $scope.multiSelectData = [
    { id: 1, label: 'Option 1' },
    { id: 2, label: 'Option 2'},
    { id: 3, label: 'Option 3' },
    { id: 999, label: 'Other', isOther: true}
  ];
  
  $scope.selectedItems = [
      { id: 1, label: 'Option 1' }
  ]
  $scope.multiSelectOutput = [];
}]).config(function($sceDelegateProvider) {
   $sceDelegateProvider.resourceUrlWhitelist([
     'self',
     'http://*./**',
     'https://rawgit.com/**',
     'http://rawgit.com/**'
   ]);
  
 });
<!DOCTYPE html>
<html>
  <head>
    <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script src="//rawgit.com/ncapito/angular-multiselect/master/multiselect.js"></script>
    <link rel="stylesheet" href="//rawgit.com/ncapito/angular-multiselect/master/styles/multi-select.css" />
    <script src="script.js"></script>
  </head>
  <body ng-app="multiSelectDemo">
    <div class="container">
      <h1>Shalotelli Angular Multiselect</h1>
      <div ng-controller="MainCtrl">
        <multi-select 
        values="multiSelectData" 
        model="selectedItems" 
        show-filters="true" 
        show-other="true" 
        other-ng-model="other"
        other-field="isOther"
        other-event="keyup" 
        value-field="id" 
        label-field="label" 
        
        template-path="http://rawgit.com/ncapito/angular-multiselect/master/views/directives/multi-select.html"></multi-select>
        <hr />
        <p>Multi Select Data: </p>
        <pre>{{multiSelectData}}</pre>
        <p></p>
        <hr />
        <p>Multi Select Output: </p>
        <pre>{{selectedItems}}</pre>
        <p></p>
      </div>
    </div>
  </body>
</html>

问候。

最新更新