Angular.JS ermittelt, ob das Kontrollkästchen aktiviert ist und zeigt es in Echtzeit an-js-Tutorial-php.cn

Angular.JS ermittelt, ob das Kontrollkästchen aktiviert ist und zeigt es in Echtzeit an

高洛峰

Freigeben： 2016-12-03 13:32:32

Original

2153 Leute haben es durchsucht

Werfen wir zunächst einen Blick auf das einfache Rendering, wie unten gezeigt:

Angular.JS ermittelt, ob das Kontrollkästchen aktiviert ist und zeigt es in Echtzeit an

Sehen Sie sich den HTML-Code an:

<!DOCTYPE html>
<html data-ng-app="App">
<head>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
 <script src="script2.js"></script>
</head>
<body data-ng-controller="AddStyleCtrl">
 
 <div>Choose Tags</div>
 <div>
  <div>You have choosen:</div>
  <hr>
  <label data-ng-repeat="selectedTag in selectedTags">
   (({{selectedTag}}))
  </label>
  <hr>
  <div data-ng-repeat="category in tagcategories">
   <div>{{ category.name }}</div>
   <div data-ng-repeat="tag in category.tags">
    <div>
     <input type="checkbox" id={{tag.id}} name="{{tag.name}}" ng-checked="isSelected(tag.id)" ng-click="updateSelection($event,tag.id)">
     {{ tag.name }}
    </div>
   </div>
   <hr>
  </div>
 </div>
 
<pre class="brush:php;toolbar:false">{{selected|json}}

Nach dem Login kopieren

{{selectedTags|json}}

Nach dem Login kopieren

Zeile2 definiert die AngularJS-App;

Zeile4 stellt das AngularJS-Skript vor;

Zeile5 stellt das von mir geschriebene Skript script2.js vor; >Zeile7 gibt den Controller AddStyleCtrl an

Zeile13-15 zeigt dem Benutzer die ausgewählten Tags in Echtzeit an

Zeile17-Zeile26 verwendet eine Doppelschleife, um die Daten in der Datenbank aufzulisten (in diesem Fall). , es wird in einem Objekt des Controllers gespeichert) Daten

Diese Codezeile in Zeile 21 ist sehr nützlich:

Die ID und der Name des Tags sind Gespeichert. Verwenden Sie isSelected(tag.id), um festzustellen, ob es ausgewählt ist. Rufen Sie beim Klicken die Methode updateSelection($event,tag.id) auf In der durch ng-click ausgelösten Funktion können Sie this nicht direkt übergeben, sondern müssen event übergeben. Denn in Angularjs ist dies hier ein Ereignis. Denn in Angularjs ist dies hier der Bereich. Wir können ein Ereignis übergeben, dann ein Ereignis in der Funktion und dann event.target in der Funktion, um das Element abzurufen.

Zeile29-30 wurde mir während des Tests angezeigt. Sie können den Inhalt des ausgewählten Arrays und des selectedTags-Arrays sehen

Dann schauen Sie sich den AngularJS-Code an: (script2.js)

Zeile6 definiert die Winkel-App;

Zeile10 definiert den Controller AddStyleCtrl;

Zeile12-63 definiert das Label-Objekt

/**
 * Created by zh on 20/05/15.
 */
// Code goes here
 
var iApp = angular.module("App", []);
 
 
 
iApp.controller(&#39;AddStyleCtrl&#39;, function($scope)
{
 $scope.tagcategories = [
  {
   id: 1,
   name: &#39;Color&#39;,
   tags: [
    {
     id:1,
     name:&#39;color1&#39;
    },
    {
     id:2,
     name:&#39;color2&#39;
    },
    {
     id:3,
     name:&#39;color3&#39;
    },
    {
     id:4,
     name:&#39;color4&#39;
    },
   ]
  },
  {
   id:2,
   name:&#39;Cat&#39;,
   tags:[
    {
     id:5,
     name:&#39;cat1&#39;
    },
    {
     id:6,
     name:&#39;cat2&#39;
    },
   ]
  },
  {
   id:3,
   name:&#39;Scenario&#39;,
   tags:[
    {
     id:7,
     name:&#39;Home&#39;
    },
    {
     id:8,
     name:&#39;Work&#39;
    },
   ]
  }
 ];
 
 $scope.selected = [];
 $scope.selectedTags = [];
 
 var updateSelected = function(action,id,name){
  if(action == &#39;add&#39; && $scope.selected.indexOf(id) == -1){
   $scope.selected.push(id);
   $scope.selectedTags.push(name);
  }
  if(action == &#39;remove&#39; && $scope.selected.indexOf(id)!=-1){
   var idx = $scope.selected.indexOf(id);
   $scope.selected.splice(idx,1);
   $scope.selectedTags.splice(idx,1);
  }
 }
 
 $scope.updateSelection = function($event, id){
  var checkbox = $event.target;
  var action = (checkbox.checked?&#39;add&#39;:&#39;remove&#39;);
  updateSelected(action,id,checkbox.name);
 }
 
 $scope.isSelected = function(id){
  return $scope.selected.indexOf(id)>=0;
 }
});

Nach dem Login kopieren

Zeile64, 66 deklariert zwei Array-Objekte in $scope (kann zusammengeführt werden, ist 1) , wird zum Speichern der ID bzw. des Namens des Tags verwendet;

line68-78 definiert die updateSelected-Methode, die von updateSelection aufgerufen wird; Element nicht vorhanden, Daten (ID, Name) zum Array hinzufügen
Zeile 73-77: Wenn die Entfernungsoperation und das Element „array[id]“ vorhanden sind, löschen Sie die Daten (ID, Name) aus dem Array;
line80 -84 definiert die updateSelection-Methode, die aufgerufen wird, wenn auf das Kontrollkästchen der HTML-Seite geklickt wird;
line81 ruft das angeklickte dom-Element über die $event-Variable ab;
line82 bestimmt, ob es sich um ein Add handelt Operation oder ein Add-Vorgang über den aktuellen Status der Checkbox-Entfernungsoperation;
line83 ruft die updateSelected-Methode auf, um die Daten zu aktualisieren.
line86-88 definiert die isSelected-Methode, die verwendet wird, um zu bestimmen, ob das Kontrollkästchen mit der ID versehen ist wird ausgewählt und übergibt dann den Wert an die ng-checked-Anweisung der Seite;