Automatisches Auswählen und Sammeln von Kontrollkästchenwerten im Array

Ich habe ein Problem beim Festlegen (Prüfen) und Abrufen von Datenfeldern aus der Ansicht in mein Modell. Lassen Sie mich mein Problem mit Code weiter erklären.Automatisches Auswählen und Sammeln von Kontrollkästchenwerten im Array

Dies ist mein Controller, wo ich Arbeitstage liefern

$scope.workDays = [ 
       {name: 'Monday', value: 1}, 
       {name: 'Tuesday', value: 2}, 
       {name: 'Wednesday', value: 3}, 
       {name: 'Thursday', value: 4}, 
       {name: 'Friday', value: 5}, 
       {name: 'Saturday', value: 6}, 
       {name: 'Sunday', value: 7}, 
      ] 
$scope.selectedDays = "1,3,4,6";

Dann habe ich diese Kontrollkästchen mit ng-Wiederholung in meinem HTML-Render

<label>Working days</label> 
<div class="checkbox"> 
    <label ng-repeat="w in workDays" > 
      <input type="checkbox" ng-value="w.value" ng-checked="selectedDays" > 
      {{w.name}}&nbsp;&nbsp; 
    </label> 
</div>

1. Frage: Wie Kontrollkästchen zu überprüfen, basierend auf Wert $ scope.selectedDays?

Das zweite Problem, das ich habe, ist einmal ich versuche, neue ausgewählte Werte zu holen i immer leeres Array erhalten

Also mein Controller wie diese dann

$scope.myData = []; 
console.log($scope.myData);

sieht i wählen und einige Kontrollkästchen deaktivieren, Wie auch immer, Konsolenprotokoll meldet leer Array []

Ich hoffe, Sie können mir helfen. Wenn Sie weitere Informationen benötigen, lassen Sie es mich wissen und ich werde zur Verfügung stellen. Vielen Dank!

Quelle

2016-06-30 Valor_

Normalerweise wird eine ausgewählte Eigenschaft im Objekt und ng-Modell in der Eingabe mit dieser Eigenschaft verwendet – juvian

Sie können ng-if verwenden. Bitte versuchen Sie es https://docs.angularjs.org/api/ng/directive/ngIf –

eine Funktion zu Ihrem Controller hinzufügen und rufen Sie Ihren Modell ($ scope.myData) zu initialisieren, wie folgt aus:

-Controller

$scope.myData = []; 
function getMyData() { 
    angular.forEach($scope.workDays, function(day) { 
    var newDay = { 
     name: day.name, 
     selected: $scope.selectedDays.indexOf(day.value) >= 0 
    }; 
    $scope.myData.push(newDay); 
    }); 
} 

getMyData();

Dann können Sie Ihre Markup wie folgt vereinfachen:

Markup

<div class="checkbox"> 
    <label ng-repeat="w in myData"> 
    <input type="checkbox" ng-model="w.selected"> {{w.name}}&nbsp;&nbsp; 
    </label> 
</div>

Sie können sehen, dies funktioniert here.

Quelle

2016-06-30 20:37:28 jbrown

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

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.name = 'World'; 
 

 
    $scope.workDays = [{ 
 
    name: 'Monday', 
 
    value: 1 
 
    }, { 
 
    name: 'Tuesday', 
 
    value: 2 
 
    }, { 
 
    name: 'Wednesday', 
 
    value: 3 
 
    }, { 
 
    name: 'Thursday', 
 
    value: 4 
 
    }, { 
 
    name: 'Friday', 
 
    value: 5 
 
    }, { 
 
    name: 'Saturday', 
 
    value: 6 
 
    }, { 
 
    name: 'Sunday', 
 
    value: 7 
 
    }, ] 
 
    $scope.selectedDays = [1, 3, 4, 6]; 
 
    $scope.myData = $scope.selectedDays; 
 

 
    $scope.getData = function(Day) { 
 
    var index = $scope.myData.indexOf(Day); 
 

 
    if (index < 0) { 
 
     $scope.myData.push(Day) 
 
     console.log('myData', $scope.myData); 
 
    } else { 
 
     $scope.myData.splice(index, 1) 
 
     console.log('myData', $scope.myData); 
 
    } 
 
    } 
 
    $scope.IsChecked = function(Day) { 
 

 

 
    var index = $scope.selectedDays.indexOf(Day); 
 

 
    if (index > -1) { 
 

 
     return true 
 
    } else { 
 
     return false 
 
    } 
 
    } 
 
});

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

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <link data-require="[email protected]" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" /> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <p>Hello {{name}}!</p> 
 
    <label>Working days</label> 
 
    <div class="checkbox"> 
 
    <label ng-repeat="w in workDays" ng-model="myData"> 
 
     <input type="checkbox" ng-value="w.value" ng-click="getData(w.value)" ng-checked="IsChecked(w.value)" />{{w.name}} 
 
    </label> 
 
    </div> 
 

 
</body> 
 

 
</html>

behoben.

Quelle

2016-06-30 20:30:36 Prianca

Automatisches Auswählen und Sammeln von Kontrollkästchenwerten im Array

Antwort

Verwandte Themen