Taira Multiselect Simple, Easy to use and Flexible Multiselect directive for AngularJS

  
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>

  <!--Taira Multiselect-->
  <script type="text/javascript" src="js/taira.multiselect.min.js"></script>

  <!--Bootstrap css-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  

  
    var myApp = angular.module('myApp', ['ui.bootstrap', 'taira-multiselect']);
  

  
  <taira-multiselect model="selected" options="dataSet" settings="settings"></taira-multiselect>
  

  
  $scope.selected = [];
  $scope.dataSet = [
    {id: 1, name: 'Alejo', surname: 'Gerlingstein', address: {stree: 'St', number: 12}},
    {id: 2, name: 'Topo', surname: 'Noesuficiente', address: {stree: 'St', number: 12}},
    {id: 2, name: 'Vivian', surname: 'Redox', address: {stree: 'St', number: 12}},
  ];
  $scope.settings = {
    display: {
      fields: ['name']
    }
  };
  

  {{selected}}

Selected fields

By default Taira Multiselect pushes the whole object into the array of selected items. You can however specify which fields you want to push by changing the select.fields setting.

  
  $scope.settings = {
    display: {
      fields: ['name']
    },
    select: {
      fields: ['id', 'name']
    }
  };
  

  {{selected2}}

Display options

The setting display.fields is an Array of keys to be displayed in the options inside the select. It can also be a dotted path to a deep property.

  
  $scope.dataSet = [
    {id: 1, name: 'Alejo', surname: 'Gerlingstein', address: {street: 'St', number: 12}},
    {id: 2, name: 'Topo', surname: 'Noesuficiente', address: {street: 'St', number: 12}},
    {id: 2, name: 'Vivian', surname: 'Redox', address: {street: 'St', number: 12}},
  ];
  $scope.settings = {
    display: {
      fields: ['name', 'surname', 'address.street']
    }
  };
  

If you want to add some custom content -html or plain text- before or after the displayed field you can do so with the display.prepend and display.append setting.

  
  $scope.settings = {
    display: {
      fields: ['name', 'surname'],
      prepend: '<i class="fa fa-user"></i> ',
      append: ' | added text'
    },
    extra: {
      showCheckbox: false
    }
  };
  

Full list of settings and their default values

  
  {
    "display": {
      "fields": ['id'],                       //fields that will be showed for each option
      "prepend": '',                          //html that will be prepended to each option in addition to fields
      "append": '',                           //html that will be appended to each option in addition to fields
    },
    "btn": {
      "text": 'Multiselect',                  //text that will be shown in the button
      "class": 'btn-primary',                 //btn class
      "count": false                          //show total number of selected items in the button
    },
    "list": {
      "opened": false,                        //show or not the list opened
      "class": '',                            //class to be applied to the list
      "selectedClass": ''                     //class to be applied to a selected item
    },
    "select": {
      "fields": [],                           //fields that will be pushed when an option is selected. [] = all
    },
    "extra": {
      "selectAll": true,                      //show or not a select all button
      "unselectAll": true,                    //show or not an unselect all button
      "showCheckbox": true                    //show checkbox next to each option
    }
  };