帶複選框的MultiSelect下拉菜單Agularjs

-2

是否有任何標籤可用於在不寫入angularjs指令的情況下使用複選框創建多選select下拉菜單？謝謝。帶複選框的MultiSelect下拉菜單Agularjs

2017-02-10 Anusha Bayya

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

來源

2017-11-21 11:44:31 Kondal

不作爲標準號碼。 你可以創建自己的指令或使用一個令人興奮的指令，如果你不想像你所說的那樣寫自己的指令。

看看AngularJS Dropdown Multiselect，並使用選項checkboxes。

來源

2017-02-10 08:28:19

您還可以管理類似於下面演示中所實施的內容。

'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="[email protected]" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
 
    <script data-require="[email protected]" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
    <script data-require="[email protected]" 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>

問候。

來源

2017-02-10 09:32:44

的問題是與 '複選框'。 –

是的，我知道，正如答案所說__你也可以管理像......__ –

@HardikVaghani謝謝生病看看它的工作 –

帶複選框的MultiSelect下拉菜單Agularjs

回答

相關問題