如何使用Angularjs Dropdown Multiselect顯示帶計數的下拉值？

Question

AngularJS Dropdown Multiselect - 每個選項搜索自定義模板。

我發現我的查詢的解決方案將使用AngularJS Dropdown Multiselect文檔的上述URL，但如果我使用下面的代碼，它不會反映在我的應用程序的視圖中：

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

我想通過添加一個計數來實現它：

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

有任何建議或缺失的鏈接？

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

Answer 1

請在下面找到工作方案。 以下是我所做的改變。

1. 改變，如果參考miltiselect庫， 這 （最新）

2. 添加了'angularjs-dropdown-multiselect'作為我的主app模塊的依賴項

3. 創建一個控制器MainCtrl ，將其分配給模板
4. 為$scope添加了一個額外的屬性（ $scope.example19model = []; ）來保存選定的選項。

讓我知道，如果這對你有用:)

 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

您可以使用select2庫來幫助選擇多個輸入。

查看此鏈接以獲取實時演示。

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