Jak wyświetlać wartości rozwijane za pomocą licznika za pomocą rozwijanego multiselecta Angularjs?

Question

AngularJS Dropdown Multiselect - Wyszukaj szablon niestandardowy dla każdej opcji.

Znalazłem rozwiązanie mojego zapytania będzie Stosując powyższy link dokumentacji angularjs rozwijane wielokrotny ale jeśli używam poniższy kod, to nie odzwierciedlają w widoku mojej aplikacji:

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

Chcę acheive go dodając ilość:

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

Wszelkie sugestie lub brakujące ogniwa?

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

Answer 1

Poniżej znajduje się działające rozwiązanie. Poniżej znajdują się zmiany, które zrobiłem.

1. Zmień odniesienie jeśli miltiselect biblioteki this (najnowsza)

2. dodał 'angularjs-dropdown-multiselect' jako zależnością do mojego głównego aplikacji modułu

3. stworzył kontroler MainCtrl, przypisany go do szablonu
4. Dodano dodatkową właściwość ($scope.example19model = [];) do $scope do przechowywania wybranych opcji.

Daj mi znać, jeśli działa to dla ciebie :)

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

Można użyć select2 biblioteki, która pomaga wybrać kilka wejść.

Sprawdź to link, aby obejrzeć na żywo.

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