AngularJS mehrere Checkboxen Zweifel (Angular Material)

Ich versuche, mehrere Angular Material-Checkboxen mit dem gleichen ng-Modell zu bekommen. Ich habe zwei Probleme: Wie bekomme ich Standard-Checkbox-Checkboxen und wie mache ich mindestens eines dieser Checkboxen erforderlich? Ich habe versucht mit ng-checked, aber dann kann ich die Werte nicht über das Formular POST.AngularJS mehrere Checkboxen Zweifel (Angular Material)

HTML

 <label for="inputPassword3" class="col-sm-2 control-label">Školski sat *</label> 
     <div class="col-sm-10" > 
     <span class="col-sm-2" ng-repeat="period in periods"> 
      <md-checkbox ng-model="form.periods[period]" ng-click="toggle(period, selected)"> 
      {{ period }}. sat 
      </md-checkbox> 
     </span>{{selected | json}} 
     </div>

App.js

$scope.periods = [1,2,3,4,5,6,7,8,9,0]; /*broj sati*/ 
     $scope.selected = [2]; 
     $scope.toggle = function (period, list) { 
     var idx = list.indexOf(period); 
     if (idx > -1) { 
      list.splice(idx, 1); 
     } 
     else { 
      list.push(period); 
     } 
     }; 
     $scope.exists = function (period, list) { 
     return list.indexOf(period) > -1; 
     };

Bitte Hilfe.

Quelle

2016-07-30 Kruno

Sie Eigentlich ngModel ein Objekt ist, so ausgewählter Wert auf Last gemacht werden, sollten Sie Folgendes tun:

$scope.model = {}; 
$scope.model.periods = {"2": true};

Und alle ausgewählten Kontrollkästchen, um Sie über die Tasten durchlaufen sollen, wie unten:

$scope.save = function() { 
    // Get all checked boxes 
    var checked = Object.keys($scope.model.periods).filter(function(key) { 
    return $scope.model.periods[key]; 
    }); 
    console.log(checked); 
}

anzeigen Arbeits:

(function() { 
 
    angular 
 
    .module('app', ['ngMaterial']) 
 
    .controller('MainCtrl', MainCtrl); 
 

 
    MainCtrl.$inject = ['$scope']; 
 

 
    function MainCtrl($scope) { 
 
    $scope.model = {}; 
 
    $scope.model.periods = {"2": true}; 
 
    $scope.periods = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]; /*broj sati*/ 
 

 
    $scope.save = function() { 
 
     // Get all checked boxes 
 
     var checked = Object.keys($scope.model.periods).filter(function(key) { 
 
     return $scope.model.periods[key]; 
 
     }); 
 
     console.log(checked); 
 
    } 
 
    } 
 
})();

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-aria.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.min.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.css"> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <form name="form"> 
 
    <div class="col-md-12"> 
 
     <label for="inputPassword3" class="col-sm-2 control-label">Školski sat *</label> 
 
     <div class="col-sm-10"> 
 
     <span class="col-sm-2" ng-repeat="period in periods"> 
 
      <md-checkbox ng-model="model.periods[period]"> 
 
      {{ period }}. sat 
 
      </md-checkbox> 
 
     </span> 
 
     </div> 
 
     <span ng-bind="model.periods | json"></span> 
 
     <hr> 
 
     <button type="button" class="btn btn-success" ng-click="save()">Save data</button> 
 
    </div> 
 
    </form> 
 
</body> 
 

 
</html>

Ich hoffe, es hilft.

Quelle

2016-07-30 19:30:08 developer033

Dank Entwickler033, Das ist es. Ich schätze deine Bemühungen sehr! – Kruno

@Kruno, kannst du die Antwort als richtig markieren? – developer033

AngularJS mehrere Checkboxen Zweifel (Angular Material)

Antwort

Verwandte Themen