如何使用Angularjs Dropdown Multiselect显示带有计数的下拉值？答案

【问题标题】：How to show dropdown values with count using Angularjs Dropdown Multiselect?如何使用Angularjs Dropdown Multiselect显示带有计数的下拉值？
【发布时间】：2018-04-25 21:10:12
【问题描述】：

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

【问题讨论】：

codepen.io/edisonpappi/pen/KymEpr 查看此示例
谢谢@Edison，但我想要阿拉巴马州的计数，这是您展示的示例中下拉列表中的选项。如果您想要任何清晰度，请告诉我
见codepen.io/edisonpappi/pen/vWmqVd?editors=1010
不确定这是否符合我的目的，我们不能使用 angularjs-dropdown-multiselect 库来实现吗？
@GOK 如果您可以提供代码的工作示例，我们将有更好的机会帮助您，另外，您使用的是哪个版本的库？

标签： javascript angularjs multi-select

【解决方案1】：

请在下面找到可行的解决方案。以下是我所做的更改。

将miltiselect库的引用更改为this（最新）
将'angularjs-dropdown-multiselect' 添加为我的主应用模块的依赖项
创建了一个控制器MainCtrl，将其分配给模板
为 $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>

【讨论】：

如果你误会了；我想用 David(20) 和 Jhon(30) 这样的计数来实现 David。
计数在哪里？
请查看修改后的答案，如果这是您的意思。
@GOK 运气好吗？？

【解决方案2】：

您可以使用select2 库来帮助选择多个输入。

查看此link 以获取现场演示。

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

【讨论】：