1

Solicito de su ayuda debido a que no he logrado hacer binding entre varios checkbox y los datos. Lo he intentado de varias formas y este ha sido mi resultado:

HTML

<label ng-repeat="teams in teams" class="checkbox-inline">
  <input type="checkbox"  
    value="{{teams.name}}" ng-model="data.id"> {{fruit.id}}
</label>

Controlador

$scope.teams = [
    { name: "Red", id: 0, }, 
    { name: "Blue", id: 1,}, 
    { name: "Green", id: 2,},
    { name: "Yellow", id: 3, }, 
    { name: "Orange", id: 4,}, 
    { name: "Purple", id: 5}
];                    
$scope.data = [0,1];   

//Posible solucion:
$scope.selectF = function selectF(){
  for (var i=0;i<data.length;i++){
   for (var j=0;j<teams.length;j++) {
      if(data[i].id === teams[i].id ){
        return true;
      }
     return false;
    }
  } 
}

1 respuesta 1

1

Me parece una solución muy sofisticada. Para hacer bindings con checkbox y ng-model usa valores true o false. Si debes convertir dichos valores usa un $watch como el que esta a continuación. Fíjate que en el no he escrito una sola línea de código, solamente el necesario para inicializar las colecciones.

angular.module('app', [])
  .controller('CheckBoxCtrl', function($scope) {
    $scope.teams = [{
      name: "Red",
      id: 0,
    }, {
      name: "Blue",
      id: 1,
    }, {
      name: "Green",
      id: 2,
    }, {
      name: "Yellow",
      id: 3,
    }, {
      name: "Orange",
      id: 4,
    }, {
      name: "Purple",
      id: 5
    }];
    $scope.data = [true, false, true, false, true, false];

    $scope.$watch('data', function(val) {
      console.log(val);
    }, true);
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="CheckBoxCtrl">
  <label ng-repeat="team in teams" class="checkbox-inline">
    <input type="checkbox" value="{{team.name}}" ng-model="data[team.id]">{{team.name}}
  </label>
</div>

Si quieres algo más complejo que eso usa checklist-model

3
  • 02 y van dos; mil gracias, por tu ayuda, colaboracion y explicacion, esta genial.
    – Gdaimon
    el 29 sep. 2016 a las 19:19
  • mira estuve probando y no hace binding con el $scope.data jsbin.com/zenaxobete/edit?html,js,output
    – Gdaimon
    el 29 sep. 2016 a las 21:39
  • @Gdaimon En mi snippet yo le estoy haciendo un $watch a $scope.data y puedes ver en la consola cuando cambian los resultados. En tu JSBin estas poniendo el mismo código que tienes en la pregunta por lo que no te debería funcionar. Tu $scope.data contiene valores [0, 1] y como te puse en la respuesta deben ser [false, true]
    – devconcept
    el 30 sep. 2016 a las 12:09

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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