Angular.JS는 체크박스가 선택되었는지 확인하고 이를 실시간으로 표시합니다.-JS 튜토리얼-php.cn

Angular.JS는 체크박스가 선택되었는지 확인하고 이를 실시간으로 표시합니다.

高洛峰

풀어 주다： 2016-12-03 13:32:32

원래의

2158명이 탐색했습니다.

먼저 아래와 같이 간단한 렌더링을 살펴보겠습니다.

Angular.JS는 체크박스가 선택되었는지 확인하고 이를 실시간으로 표시합니다.

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}}

로그인 후 복사

line2는 AngularJS 앱을 정의합니다.

line4는angularjs 스크립트를 소개합니다.

line5는 직접 작성한 script2.js 스크립트를 소개합니다. >line7은 컨트롤러 AddStyleCtrl을 지정합니다.

line13-15는 선택한 태그를 사용자에게 실시간으로 표시합니다.

line17-line26은 이중 루프를 사용하여 데이터베이스의 데이터를 나열합니다. , 컨트롤러의 객체에 저장됩니다) Data

line21의 이 코드 줄은 매우 유용합니다:

태그의 ID와 이름은 다음과 같습니다. isSelected(tag.id)를 사용하여 선택되었는지 확인하세요. 클릭 시 updateSelection($event,tag.id) 메서드를 호출하세요.

ng-click에 의해 트리거된 함수에서는 이를 직접 전달할 수 없지만 event 에는 전달해야 합니다. Angularjs에서는 이것이 이벤트이기 때문입니다. Angularjs에서는 이것이 범위이기 때문입니다. 이벤트를 전달한 다음 함수에 이벤트를 전달한 다음 함수에 event.target을 전달하여 요소를 가져올 수 있습니다.

테스트 중에 line29-30이 표시되었습니다. 선택한 배열과 selectedTags 배열의 내용을 볼 수 있습니다.

그런 다음 AngularJS 코드를 살펴보세요. (script2.js)

line6은 각도 앱을 정의합니다.

/**
 * 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;
 }
});

로그인 후 복사

line10은 컨트롤러 AddStyleCtrl을 정의합니다.

line12-63은 레이블 객체를 정의합니다.
line64, 66은 $scope에 두 개의 배열 객체를 선언합니다(병합 가능 개수는 1입니다). , 태그의 ID와 이름을 각각 저장하는 데 사용됩니다.
line68-78은 updateSelection에 의해 호출되는 updateSelected 메소드를 정의합니다.
line69-72: 추가 작업 및 '배열 [id]' 요소가 없으면 배열에 데이터(id, name)를 추가합니다.
Line73-77: 제거 작업과 'array[id]' 요소가 있으면 배열에서 데이터(id, name)를 삭제합니다.
line80 -84는 HTML 페이지의 확인란을 클릭할 때 호출되는 updateSelection 메서드를 정의합니다.
line81은 $event 변수를 통해 클릭된 dom 요소를 가져옵니다.
line82는 추가인지 여부를 결정합니다. 작업 또는 체크박스 제거 작업의 현재 상태를 통한 추가 작업
Line83은 데이터를 업데이트하기 위해 updateSelected 메서드를 호출합니다.
line86-88은 체크박스에 ID가 있는지 확인하는 데 사용되는 isSelected 메서드를 정의합니다. id가 선택된 다음 해당 값을 페이지의 ng-checked 명령에 전달합니다.