lundi 16 mai 2016

Angular checkboxes wont remain checked ?

I have some angular.js code that populates an array when a user clicks on some checkboxes. I generate a list of checkboxes with an 'ng-repeat' and I need to save an array to the server side when a user submits a form. I have this code and it works.. Fiddle Here However, the checkboxes wont stay 'checked'? does anyone have any advice on how to fix this UI bug?

html

  <div ng-controller="MyCtrl">

      <div class="col-sm-6">
          <div class="form-group">
              <label>Search by Organism :</label>
              <input type="text" class="form-control" placeholder="Organism" ng-model="filterText">
          </div>
          <div class="well" style="max-height: 250px; overflow: auto;">
              <ul class="list-group checked-list-box" ng-repeat="x in organisms | filter: filterText">
                  <label>
                      <input type="checkbox" ng-change="match($index)" ng-model="orgs[$index]"> 
                  </label>
              </ul>
          </div>
      </div>

    </div>

angular

 var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.orgs = [];
        $scope.match = function(index) {
            console.log("index", index);
            console.log("organism: ", $scope.organisms[index]);
            $scope.orgs[index] = $scope.organisms[index];
        };

        $scope.organisms = ["Pseudomonas aeruginosa", "Stenotrophomonas maltophilia", "Pseudomonas luteola", "Pseudomonas aeruginosa", "Streptococcus pneumoniae", "Candida tropicalis", "IAV-H1N1", "IAV-H1N2", "IAV-H3N2", "IAV-mixed", "IAV-H10N8", "IAV-H2N2", "IAV-H5N1", "IAV-H5N6", "IAV-H7N3", "IAV-H7N7", "IAV-H7N9", "IAV-H9N2"];


}

Aucun commentaire:

Enregistrer un commentaire