1

Uso esta librería : https://silviomoreto.github.io/bootstrap-select/examples/

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

Me gustaría saber como puedo hacer por defecto que marque el 1 y el 3

Posibilidad 2: Uso de esta librería : https://bentorfs.github.io/angular-bootstrap-multiselect/

$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"}] 
}

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

NOTA:

<select multiple > , no es viable porque tengo muchos select y me ocuparia mucho la página
5
  • En mi ejemplo te muestro una alternativa usando ng-options, asignando $scope.activadas = [1, 3]; sería suficiente, pero te muestro una forma más elegante de tener las dos cosas en una única matriz. el 6 feb. 2017 a las 14:21
  • Solucionado con este post y con la posibilidad 1 : stackoverflow.com/questions/40304510/…
    – sirdaiz
    el 6 feb. 2017 a las 17:28
  • Acabo de llegar y no había leído tu mensaje. Tras un par de pruebas infructuosas con $watch para hacer un refresh al actualizar la vista encontré esta directiva que está desarrollada para ser usada en angular. El problema de tu librería es que modifica el DOM tras haberse generado y es difícil forzar su actualización :( Fíjate como la mayoría de ellos se apoyan en un elemento del DOM por encima del select/option generado (por ejemplo un div) o soluciones similares que permitan regenerarlo sin perder la etiqueta-ng origen. el 6 feb. 2017 a las 18:56
  • Por cierto, enhorabuena :) Deja la solución como respuesta para que pueda darte un voto y que si otra persona se encuentra el mismo problema pueda usar tu solución. el 6 feb. 2017 a las 18:57
  • Hola @sirdaiz , ¿has conseguido hacerlo funcionar? Mira mi respuesta si aún no lo conseguiste. el 6 feb. 2017 a las 21:01

1 respuesta 1

2

He modificado el código para generarte un ejemplo de la librería que estás usando, espero que te sea de ayuda.

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>

Segunda tentativa usando directamente 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>

7
  • el problema es que tengo varios select y por eso utilizo esa libreria porque no quiero que la pagina sea muy grande
    – sirdaiz
    el 6 feb. 2017 a las 15:28
  • debido a que tengo unos 50 select y el cliente no desea verlo así sino como el ejemplo de la librería, edito mi pregunta tb con otra posibilidad que casi me funciona
    – sirdaiz
    el 6 feb. 2017 a las 15:36
  • he puesto otra alternativa que he probado pero nada :(, sobre todo la segunda posibilidad me gusta más
    – sirdaiz
    el 6 feb. 2017 a las 15:43
  • bueno me da igual que solucion mientras funcione :)
    – sirdaiz
    el 6 feb. 2017 a las 16:07
  • solucionado con este post: stackoverflow.com/questions/40304510/…
    – sirdaiz
    el 6 feb. 2017 a las 17:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.