Einzel-und mehrfach-Karten-Auswahl-Daten in angularjs

Bitte schauen Sie auf der Geige

jsfiddle

Ich habe mehrere Karten in einem container. Und ich habe einen einzigartigen Wert "objectid".

  • Ich habe "selactAll" - button, Wenn ich auf diesen button klicken, jede Karte sollte ausgewählt werden und die Schaltfläche speichern ist aktiviert. Daß ich mich übergeben müssen alle Karten in einem parameter.

  • Nach "selectAll", wenn ich klicken Sie auf die Karte, diese Besondere Karte erhalten sollte, deaktivieren. Dass die Zeit, wenn ich auf "speichern", die restlichen selecteds Karten sollten in einem array-format.

  • Die Dritte ist, die ich auswählen kann einzelne Karte auf klicken Sie in auf den button. Zeit, die ich brauchen, um passieren die einzelne Karte in einem parameter speichern. Wie kann ich übergeben Sie diese Daten in einem Array-format. Nur ausgewählte Daten.

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

myApp.controller('MainCtrl', function($scope) {
	$scope.unselectBtn = true;
  $scope.selectBtn = false;
  $scope.saveBtn = true;
  $scope.divs = [1, 2, 3]; // for eample
  $scope.containerSelected = $scope.divs.map(val => false);
  $scope.buttonVisible = $scope.divs.map(val => true);
  $scope.toggleButton = function(e, i) {
		
    console.log('toggleButton')
    $scope.containerSelected[i] = true;
    if($scope.containerSelected[i] = true){
    	$scope.saveBtn = false;
    }
    $scope.buttonVisible[i] = false;
    e.stopPropagation();
  };

  $scope.toggleContainer = function(i) {
    if ($scope.containerSelected[i]) {
      $scope.containerSelected[i] = false;
      $scope.buttonVisible[i] = true;
    }
  };
  
  $scope.toggleAllButton = function() {
  $scope.unselectBtn = false;
    $scope.selectBtn = true;
    $scope.saveBtn = false;
  	$scope.containerSelected = $scope.containerSelected.map(val => true);
    $scope.buttonVisible = $scope.buttonVisible.map(val => false);
    console.log($scope.containerSelected)
  }
  $scope.toggleUnselectAllBtn = function(){
  $scope.unselectBtn = true;
    $scope.selectBtn = false;
    $scope.saveBtn = true;
    $scope.containerSelected = $scope.containerSelected.map(val => true);
    $scope.buttonVisible = $scope.buttonVisible.map(val => false);
    console.log($scope.containerSelected)
  }
  $scope.saveData = function(data){
  	console.log(data);
  }
});
#myApp {
  width: 100%%;
  display: -webkit-inline-box;
  border: 1px solid black;
  margin-top: 55px;
}

.container {
  width: 10%%;
  height: 100px;
  border: 1px solid black;
  margin: 10%%;
}

button.btn.btn-primary {
  margin-top: 25%%;
  margin-left: 40%%;
}

.selectedBorder {
  border: 3px solid blue;
}

#selectALL {
  margin-top: 20px;
}
<div title="Angular Scope" ng-app ng-controller="MainCtrl">
  <button id="selectALL" ng-hide="selectBtn" ng-click="toggleAllButton()">Select All</button>
  <button id="unselectALL" ng-hide="unselectBtn" ng-click="toggleUnselectAllBtn()">UnSelect All</button>
  <button id="save" ng-hide="saveBtn" ng-click="saveData(div)">Save</button>
  <div id="myApp">


    <div class="container" ng-repeat="div in divs track by $index" ng-class="{ 'selectedBorder': containerSelected[$index] }" ng-click="toggleContainer($index)">
      <button id="okBtn" class="btn btn-primary" ng-click="toggleButton($event, $index)" ng-show="buttonVisible[$index]">ok</button>
    </div>

  </div>
</div>

0
2019-09-17 09:30:16
Quelle
0 Antworten

Sehen Sie sich andere Fragen zu Tags an