如何使用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模块中添加了as依赖项

3. 创建了一个控制器MainCtrl,将其分配给模板
4. 添加了一个额外的属性($scope.example19model = [];)来$scope保存选定的选项.

让我知道,如果这对你有用:)

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>