AngularJS Dropdown Multiselect -- Search Custom template per option.

I have found the solution of my query will be using the above url of the documentation of AngularJS Dropdown Multiselect but if I am using the below code, it doesn't reflect on the view of my application:

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

I want to acheive it by adding a count:

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

Any suggestions or missing links?

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

AngularJS Dropdown Multiselect -- Search Custom template per option.

I have found the solution of my query will be using the above url of the documentation of AngularJS Dropdown Multiselect but if I am using the below code, it doesn't reflect on the view of my application:

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

I want to acheive it by adding a count:

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

Any suggestions or missing links?

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

• javascript
• angularjs
• multi-select

Share Improve this question Follow edited Nov 15, 2017 at 9:55 M0nst3R 5,30311 gold badge2828 silver badges3838 bronze badges asked Nov 13, 2017 at 8:40 GOKGOK 2,43866 gold badges3636 silver badges6868 bronze badges 7

• 1 codepen.io/edisonpappi/pen/KymEpr see this sample – Edison Augusthy Commented Nov 13, 2017 at 8:54
• Thanks @Edison but i want the count in Alabama which is the option inside the dropdown in the example you have shown.. let me know if u want any clarity – GOK Commented Nov 13, 2017 at 9:54
• see codepen.io/edisonpappi/pen/vWmqVd?editors=1010 – Edison Augusthy Commented Nov 13, 2017 at 11:18
• Not sure this serves my purpose, cannot we achieve this using angularjs-dropdown-multiselect library? – GOK Commented Nov 13, 2017 at 11:29
• @GOK if you could provide a working example of your code we would get a better chance at helping you, also, which version of the library are you using? – M0nst3R Commented Nov 15, 2017 at 10:29

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 5 +25

Please find working solution below. Following are the changes I have done.

1. Change the reference if miltiselect library to this (latest)

2. Added the 'angularjs-dropdown-multiselect' as dependency to my main app module

3. Created a controller MainCtrl, assigned it to the template
4. Added an extra property ($scope.example19model = [];) to $scope for holding selected options.

Let me know, if this works for you :)

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./ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare./ajax/libs/angular.js/1.6.5/angular.js"></script>
<script src="https://rawgit./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>

You can use select2 library which helps to select multiple inputs.

Check this link for live demo.

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