Question

是否有任何标签可以创建带有复选框的多选下拉列表而无需在AngularJS中编写指令？感谢。

Answer 1

不是标准号 如果你不想像你所说的那样自己编写自己的指令，你可以创建自己的指令或者使用一个令人兴奋的指令。

查看AngularJS Dropdown Multiselect，然后使用checkboxes选项。

Answer 2

// 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, };

Answer 3

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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

问候。

带有复选框AngularJS的MultiSelect下拉列表

3 个答案: