bootstrap-select select multiple

Question

bootstrap-select select multiple

Navigation

#1 by (2 votes)

1

I use this library: link

Possibility 1

$scope.opciones = [{"id":1,"name":"Test1"},{"id":2,"name":"Test2"},{"id":3,"name":"Test3"}] ;
$scope.defecto = [{"id":1,"name":"Test1"},{"id":3,"name":"Test3"}] ;

<select ng-model="defecto" class="selectpicker" multiple >
  <option ng-repeat="op.name in opciones" ng-value="op.name">{{op.name}}</option>
</select>

I would like to know how I can do by default to mark 1 and 3

Possibility 2: Use of this library: link

$scope.result2 = [{"id":1,"name":"Test1"},{"id":3,"name":"Test2"}] 

$scope.getValues = function(jdbcId) {
        TestService.getValues(jdbcId).then(
            function(d) {
                $scope.result = [{"id":1,"name":"Test1"},{"id":3,"name":"Test2"}] ;
            }
        );
   $scope.result3 = [{"id":1,"name":"Test1"},{"id":3,"name":"Test2"}] 
}

In my html

{{result}} => me muestra [{"id":1,"name":"Test1"},{"id":3,"name":"Test2"}] 

<multiselect ng-model="testing" options="result">
</multiselect> => no funciona
<multiselect ng-model="testing2" options="result2">
</multiselect> => Funciona
<multiselect ng-model="testing3" options="result3">
</multiselect> => Funciona

NOTE:

<select multiple > , no es viable porque tengo muchos select y me ocuparia mucho la página

bootstrap angularjs

asked by sirdaiz 06.02.2017 в 13:50

source

1 answer

Angular $ scope model is not updated How to use executorservice

score 2 · Accepted Answer

I have modified the code to generate an example of the library you are using, I hope it will be helpful.

var opciones = [
  { id: 1, sel: true, nombre: "Uno" },
  { id: 2, sel: false, nombre: "Dos" },
  { id: 3, sel: false, nombre: "Tres" },
  { id: 4, sel: true, nombre: "Cuatro" }
];
var stackApp = angular.module('stackApp', ['btorfs.multiselect']);
stackApp
  .controller('Ejemplo',
    ['$scope', function($scope) {
      $scope.test = 'OK';
      $scope.opciones = opciones;
      $scope.activadas = [];
      for (var i = 0; i < opciones.length; i++) {
        if (opciones[i].sel) {
          $scope.activadas.push(opciones[i]);
        }
      }
    }]
);
angular.bootstrap(document, ['stackApp']);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <form ng-controller="Ejemplo">
    <p>{{test}}</p>
    <multiselect ng-model="activadas"
      options="opciones"
      id-prop="id"
      display-prop="nombre"
      multiple>
    </multiselect>
  </form>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://bentorfs.github.io/angular-bootstrap-multiselect/bower_components/angular-bootstrap-multiselect/dist/angular-bootstrap-multiselect.min.js"></script>

Second attempt using directly bootstrap-select .

var opciones = [
  { id: 1, sel: true, nombre: "Uno" },
  { id: 2, sel: false, nombre: "Dos" },
  { id: 3, sel: true, nombre: "Tres" },
  { id: 4, sel: false, nombre: "Cuatro" }
];
var stackApp = angular.module('stackApp', []);
stackApp
  .controller('Ejemplo',
    ['$scope', function($scope) {
      $scope.test = 'OK';
      $scope.opciones = opciones;
      $scope.selectedOption = [];
      for (var i = 0; i < opciones.length; i++) {
        if (opciones[i].sel) {
          $scope.selectedOption.push(opciones[i]);
        }
      }
    }]
);
angular.bootstrap(document, ['stackApp']);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <form ng-controller="Ejemplo">
    <p>{{test}}</p>
    <select ng-model="opciones"
        class="selectpicker"
        multiple>
      <option
        ng-repeat="op in opciones"
        value="{{op.id}}"
        ng-selected="{{ op.sel == true }}">
        {{op.nombre}}
      </option>
    </select>
    <select class="selectpicker" multiple>
      <option name="1">Test 1</option>
      <option name="2">Test 2</option>
    </select>
  </form>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>