JSFiddle - React, Tailwind, and code Playground

by Rahul Bapat

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.min.js"></script>-->

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>-->

<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-dropdown-multiselect/1.11.8/angularjs-dropdown-multiselect.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-dropdown-multiselect/2.0.0-beta.10/src/angularjs-dropdown-multiselect.js"></script>
<!--<script src="https://raw.githubusercontent.com/dotansimha/angularjs-dropdown-multiselect/master/dist/src/angularjs-dropdown-multiselect.js"></script>-->

<div ng-app="myApp">

  <div ng-controller="MyAppCtrl">

    <h2>Select Baselines</h2>
    <div ng-dropdown-multiselect="" 
         options="resultsWithInfo" 
         selected-model="selected_baselines"
         extra-settings="selected_baseline_settings"
         translation-texts="selected_baselines_customTexts"></div>

    {{ selected_baselines }}

  </div>
</div>

JavaScript

angular.module('myApp', ['angularjs-dropdown-multiselect'])
    .controller('MyAppCtrl', function($scope, $timeout) {

      $scope.resultsWithInfo = [{
        name: "Baseline",
        id: "something_unique1",
        idx: 1,
        eui: 100
      }, {
        name: "Alt1",
        id: "something_unique2",
        idx: 2,
        eui: 90
      }, {
        name: "Alt2",
        id: "something_unique3",
        idx: 3,
        eui: 80
      }, {
        name: "Alt3",
        id: "something_unique4",
        idx: 4,
        eui: 75
      }, {
        name: "Alt4",
        id: "something_unique5",
        idx: 5,
        eui: 60
      }];

      // MultiSelect dropdown
      // I want it to store the whole JSON object {id, name, idx, eui}
      
      // 1.11.8
      // If I do $scope.selected_baselines = []; => multiselect works but only stores 'id'
      // $scope.selected_baselines = {}; => multiselect doesn't work, AND only stores 'id'
      
      // 2.0.0-beta.10
      // $scope.selected_baselines = {}; => $scope.selectedModel.indexOf is not a function
      // $scope.selected_baselines = []; => works
      // I want it to store the whole JSON object {id, name, idx, eui}
      $scope.selected_baselines = [];
      $scope.selected_baseline_settings = {
      	template: '<b>{{option.name}}</b>',
        searchField: 'name',
        enableSearch: true,
        selectionLimit: 4,
        selectedToTop: true // Doesn't work
      };
      
      $scope.selected_baselines_customTexts = {buttonDefaultText: 'Select Users'};

    });