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

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

Dec 03, 2016 pm 01:32 PM
angular.js

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;

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat -Befehle und wie man sie benutzt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Angular Learning spricht über eigenständige Komponenten (Standalone Component) Angular Learning spricht über eigenständige Komponenten (Standalone Component) Dec 19, 2022 pm 07:24 PM

Dieser Artikel wird Sie dabei unterstützen, Angular weiter zu lernen und die eigenständige Komponente (Standalone Component) in Angular kurz zu verstehen. Ich hoffe, er wird Ihnen hilfreich sein!

Detaillierte Erläuterung des Angular Learning State Managers NgRx Detaillierte Erläuterung des Angular Learning State Managers NgRx May 25, 2022 am 11:01 AM

Dieser Artikel vermittelt Ihnen ein detailliertes Verständnis des Angular-Statusmanagers NgRx und stellt Ihnen die Verwendung von NgRx vor. Ich hoffe, er wird Ihnen hilfreich sein!

Eine kurze Analyse unabhängiger Komponenten in Angular und deren Verwendung Eine kurze Analyse unabhängiger Komponenten in Angular und deren Verwendung Jun 23, 2022 pm 03:49 PM

Dieser Artikel führt Sie durch die unabhängigen Komponenten in Angular, wie Sie eine unabhängige Komponente in Angular erstellen und wie Sie vorhandene Module in die unabhängige Komponente importieren. Ich hoffe, er wird Ihnen hilfreich sein!

Was soll ich tun, wenn das Projekt zu groß ist? Wie teilt man Angular-Projekte sinnvoll auf? Was soll ich tun, wenn das Projekt zu groß ist? Wie teilt man Angular-Projekte sinnvoll auf? Jul 26, 2022 pm 07:18 PM

Das Angular-Projekt ist zu groß. Wie kann man es sinnvoll aufteilen? Der folgende Artikel zeigt Ihnen, wie Sie Angular-Projekte sinnvoll aufteilen. Ich hoffe, er ist hilfreich für Sie!

Lassen Sie uns darüber sprechen, wie Sie das Angular-DateTime-Picker-Format anpassen Lassen Sie uns darüber sprechen, wie Sie das Angular-DateTime-Picker-Format anpassen Sep 08, 2022 pm 08:29 PM

Wie kann ich das Angular-DateTime-Picker-Format anpassen? Im folgenden Artikel geht es um die Anpassung des Formats. Ich hoffe, er ist für alle hilfreich!

Eine Schritt-für-Schritt-Anleitung zum Verständnis der Abhängigkeitsinjektion in Angular Eine Schritt-für-Schritt-Anleitung zum Verständnis der Abhängigkeitsinjektion in Angular Dec 02, 2022 pm 09:14 PM

Dieser Artikel führt Sie durch die Abhängigkeitsinjektion, stellt die durch die Abhängigkeitsinjektion gelösten Probleme und ihre native Schreibmethode vor und spricht über das Abhängigkeitsinjektions-Framework von Angular. Ich hoffe, es wird Ihnen hilfreich sein!

Angulars :host-, :host-context- und ::ng-deep-Selektoren Angulars :host-, :host-context- und ::ng-deep-Selektoren May 31, 2022 am 11:08 AM

Dieser Artikel vermittelt Ihnen ein detailliertes Verständnis mehrerer spezieller Selektoren in Angular: host, :host-context, ::ng-deep. Ich hoffe, er wird Ihnen hilfreich sein!

Vertiefte Kenntnisse von NgModule (Modul) in Angular Vertiefte Kenntnisse von NgModule (Modul) in Angular Sep 05, 2022 pm 07:07 PM

Das NgModule-Modul ist ein wichtiger Punkt in Angular, da der Grundbaustein von Angular NgModule ist. Dieser Artikel führt Sie durch das NgModule-Modul in Angular. Ich hoffe, er wird Ihnen hilfreich sein!

See all articles