Rumah hujung hadapan web tutorial js 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}}
Salin selepas log masuk

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;
 }
});
Salin selepas log masuk

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指令;

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Pembelajaran sudut bercakap tentang komponen kendiri (Komponen Kendiri) Pembelajaran sudut bercakap tentang komponen kendiri (Komponen Kendiri) Dec 19, 2022 pm 07:24 PM

Artikel ini akan membawa anda untuk terus belajar sudut dan memahami secara ringkas komponen kendiri (Komponen Kendiri) dalam Angular Saya harap ia akan membantu anda!

Penjelasan terperinci tentang pengurus keadaan pembelajaran sudut NgRx Penjelasan terperinci tentang pengurus keadaan pembelajaran sudut NgRx May 25, 2022 am 11:01 AM

Artikel ini akan memberi anda pemahaman yang mendalam tentang pengurus negeri Angular NgRx dan memperkenalkan cara menggunakan NgRx saya harap ia akan membantu anda!

Analisis ringkas komponen bebas dalam Angular dan lihat cara menggunakannya Analisis ringkas komponen bebas dalam Angular dan lihat cara menggunakannya Jun 23, 2022 pm 03:49 PM

Artikel ini akan membawa anda melalui komponen bebas dalam Angular, cara mencipta komponen bebas dalam Angular, dan cara mengimport modul sedia ada ke dalam komponen bebas saya harap ia akan membantu anda!

Apakah yang perlu saya lakukan jika projek itu terlalu besar? Bagaimana untuk membahagikan projek Angular dengan munasabah? Apakah yang perlu saya lakukan jika projek itu terlalu besar? Bagaimana untuk membahagikan projek Angular dengan munasabah? Jul 26, 2022 pm 07:18 PM

Projek Angular terlalu besar, bagaimana untuk membahagikannya secara munasabah? Artikel berikut akan memperkenalkan kepada anda cara membahagikan projek Angular secara munasabah. Saya harap ia akan membantu anda!

Mari kita bincangkan tentang cara menyesuaikan format pemilih masa-masa-sudut Mari kita bincangkan tentang cara menyesuaikan format pemilih masa-masa-sudut Sep 08, 2022 pm 08:29 PM

Bagaimana untuk menyesuaikan format angular-datetime-picker? Artikel berikut membincangkan cara menyesuaikan format saya harap ia akan membantu semua orang!

Panduan langkah demi langkah untuk memahami suntikan pergantungan dalam Angular Panduan langkah demi langkah untuk memahami suntikan pergantungan dalam Angular Dec 02, 2022 pm 09:14 PM

Artikel ini akan membawa anda melalui suntikan pergantungan, memperkenalkan masalah yang diselesaikan oleh suntikan pergantungan dan kaedah penulisan asalnya, dan bercakap tentang rangka kerja suntikan pergantungan Angular saya harap ia akan membantu semua orang.

Angular's :host, :host-context, ::ng-deep selectors Angular's :host, :host-context, ::ng-deep selectors May 31, 2022 am 11:08 AM

Artikel ini akan memberi anda pemahaman yang mendalam tentang beberapa pemilih khas dalam Angular: host, :host-context, ::ng-deep Saya harap ia akan membantu anda!

Pemahaman mendalam tentang NgModule (modul) dalam Sudut Pemahaman mendalam tentang NgModule (modul) dalam Sudut Sep 05, 2022 pm 07:07 PM

Modul NgModule ialah titik penting dalam Angular, kerana blok binaan asas Angular ialah NgModule. Artikel ini akan membawa anda melalui modul NgModule dalam Angular saya harap ia akan membantu anda!

See all articles