Angularjs Dropdown Multiselect'i kullanarak sayımla nasıl açılır?

Question

AngularJS Dropdown Multiselect - Seçenek başına Özel şablon ara.

Sorgumda çözümü ben aşağıdaki kodu kullanıyorum ama eğer benim uygulamanın görünümünde yansıtmaz angularjs Açılır Multiselect belgeleme yukarıdaki url kullanarak olacaktır bulduk

:

$scope.example19settings = { 
    template: '<b>{{option.name}}</b>' 
}; 

Ben bir sayım ekleyerek modernleşmek istiyorum:

$scope.example19settings = { 
    template: '<b>{{option.name}}({{option.count}})</b>' 
}; 

Herhangi bir öneri ya da eksik linkler?

$scope.extraSettings = { 
    settings: { 
     selectedToTop: true, 
     styleActive: true, 
     /*template: '<b>{{option.label}}</b>'*/ 
     scrollable: true, 
     scrollableHeight: 200, 
     showEnableSearchButton: true   
    } 
}; 

Answer 1

Lütfen aşağıdaki çalışma çözümünü bulun. Yaptığım değişiklikler aşağıdadır.

1. değiştirme referansı miltiselect kütüphane this için (en son)

2. Eklendi şablona atanan denetleyici MainCtrl düzenlendi benim ana uygulama modülü

3. için bağımlılık olarak 'angularjs-dropdown-multiselect' eğer
4. Seçilen seçenekleri tutmak için $scope'a bir ekstra özellik ($scope.example19model = [];) eklendi. bu sizin için çalışıyorsa

, bana bildirin :)

var app = angular.module('app', ['angularjs-dropdown-multiselect']); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.example19model = []; 
 
    $scope.example19data = [{ 
 
    id: 1, 
 
    name: "David", 
 
    count: 20 
 
    }, { 
 
    id: 2, 
 
    name: "Jhon", 
 
    count: 30 
 
    }, { 
 
    id: 3, 
 
    name: "Lisa", 
 
    count: 40 
 
    }, { 
 
    id: 4, 
 
    name: "Nicole", 
 
    count: 50 
 
    }, { 
 
    id: 5, 
 
    name: "Danny", 
 
    count: 60 
 
    }]; 
 

 
    $scope.example19settings = { 
 
    template: '<b>{{option.name}} ({{option.count}})</b>' 
 
    }; 
 
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script> 
 
<script src="https://rawgit.com/dotansimha/angularjs-dropdown-multiselect/master/dist/angularjs-dropdown-multiselect.min.js"></script> 
 

 
<div ng-app="app"> 
 
    <div ng-controller="MainCtrl"> 
 
    <div ng-dropdown-multiselect="" options="example19data" selected-model="example19model" extra-settings="example19settings"></div> 
 
    {{example19model}} 
 
    </div> 
 
</div>

Answer 2

Birden girişlerini seçmek için yardımcı olur select2 kitaplığını kullanabilirsiniz.

Canlı demo için bu link kontrol edin.

<h3>Array of strings</h3> <ui-select multiple ng-model="ctrl.multipleDemo.colors" theme="bootstrap" ng-disabled="ctrl.disabled" close-on-select="false" style="width: 300px;" title="Choose a color"> <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match> <ui-select-choices repeat="color in ctrl.availableColors | filter:$select.search"> {{color}} </ui-select-choices> </ui-select> <p>Selected: {{ctrl.multipleDemo.colors}}</p>