Maison interface Web js tutoriel Angular.JS判断复选框checkbox是否选中并实时显示

Angular.JS判断复选框checkbox是否选中并实时显示

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

首先来看看简单的效果图,如下所示:

t01982e0291c6a1d93b.jpg

看一下html代码:

<!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}}
{{selectedTags|json}}
Copier après la connexion

line2 定义了AngularJS App;

line4 引入angularjs脚本;

line5 引入自己写的script2.js脚本;

line7 指定控制器AddStyleCtrl

line13-15 实时显示已选标签给用户看;

line17-line26 使用双重循环列出数据库(本例中就存储在了controller的一个对象里)中的数据;

  line21的这行代码作用可大了:

  存储了tag的id,name,利用isSelected(tag.id)来判断是否被checked,点击时候调用updateSelection($event,tag.id)方法;

  如果想 ng-click 触发的函数里获取到该触发该函数的元素不能直接传入 this ,而需要传入 event。因为在Angularjs里面,这个地方的this是event。因为在Angularjs里面,这个地方的this是scope 。我们可以传入 event,然后在函数里面通过event,然后在函数里面通过event.target 来获取到该元素。

line29-30 是测试时候给自己看的,可以看到selected数组和selectedTags数组中的内容;

然后看看AngularJS代码:(script2.js)

/**
 * 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;
 }
});
Copier après la connexion

line6 定义了angular app;
line10 定义了控制器AddStyleCtrl;
line12-63 定义了 标签对象
line64,66 声明了$scope中的两个数组对象(可以合并为1个),分别用来存储tag的id和name;
line68-78 定义了updateSelected方法,这个方法会被updateSelection调用;
  line69-72:如果add操作且 ‘数组[id]' 元素不存在,向数组中添加数据(id,name);
  line73-77:如果remove操作且‘数组[id]' 元素存在,从数组中删除数据(id,name);
line80-84定义了updateSelection方法,这个方法会在html页面的checkbox被点击时调用;
  line81通过$event变量来获取点击的dom元素;
  line82通过checkbox的当前状态来决定是add操作还是remove操作;
  line83调用updateSelected方法,更新数据;
line86-88定义了isSelected方法,用来判断ID为id的checkbox是否被选中,然后传值给页面的ng-checked指令;

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Commandes de chat et comment les utiliser
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

L'apprentissage angulaire parle de composants autonomes (Standalone Component) L'apprentissage angulaire parle de composants autonomes (Standalone Component) Dec 19, 2022 pm 07:24 PM

Cet article vous amènera à continuer à apprendre Angular et à comprendre brièvement le composant autonome (Standalone Component) dans Angular. J'espère qu'il vous sera utile !

Explication détaillée du gestionnaire d'état d'apprentissage angulaire NgRx Explication détaillée du gestionnaire d'état d'apprentissage angulaire NgRx May 25, 2022 am 11:01 AM

Cet article vous donnera une compréhension approfondie du gestionnaire d'état NgRx d'Angular et vous présentera comment utiliser NgRx. J'espère qu'il vous sera utile !

Une brève analyse des composants indépendants dans Angular et voir comment les utiliser Une brève analyse des composants indépendants dans Angular et voir comment les utiliser Jun 23, 2022 pm 03:49 PM

Cet article vous présentera les composants indépendants dans Angular, comment créer un composant indépendant dans Angular et comment importer des modules existants dans le composant indépendant. J'espère qu'il vous sera utile !

Que dois-je faire si le projet est trop gros ? Comment diviser raisonnablement les projets Angular ? Que dois-je faire si le projet est trop gros ? Comment diviser raisonnablement les projets Angular ? Jul 26, 2022 pm 07:18 PM

Le projet Angular est trop volumineux, comment le diviser raisonnablement ? L'article suivant vous expliquera comment diviser raisonnablement les projets Angular. J'espère qu'il vous sera utile !

Parlons de la façon de personnaliser le format angulaire-datetime-picker Parlons de la façon de personnaliser le format angulaire-datetime-picker Sep 08, 2022 pm 08:29 PM

Comment personnaliser le format angulaire-datetime-picker ? L'article suivant explique comment personnaliser le format. J'espère qu'il sera utile à tout le monde !

Un guide étape par étape pour comprendre l'injection de dépendances dans Angular Un guide étape par étape pour comprendre l'injection de dépendances dans Angular Dec 02, 2022 pm 09:14 PM

Cet article vous guidera à travers l'injection de dépendances, présentera les problèmes que l'injection de dépendances résout et sa méthode d'écriture native, et parlera du framework d'injection de dépendances d'Angular. J'espère qu'il vous sera utile !

Sélecteurs :host, :host-context, ::ng-deep d'Angular Sélecteurs :host, :host-context, ::ng-deep d'Angular May 31, 2022 am 11:08 AM

Cet article vous donnera une compréhension approfondie de plusieurs sélecteurs spéciaux dans Angular : host, :host-context, ::ng-deep. J'espère qu'il vous sera utile !

Compréhension approfondie de NgModule (module) en Angular Compréhension approfondie de NgModule (module) en Angular Sep 05, 2022 pm 07:07 PM

Le module NgModule est un point important dans Angular, car l'élément de base d'Angular est NgModule. Cet article vous fera découvrir le module NgModule dans Angular. J'espère qu'il vous sera utile !

See all articles