집 >웹 프론트엔드 >JS 튜토리얼 >AngularJS는 모두 선택하고 선택을 반전시키는 기능을 구현합니다_AngularJS

AngularJS는 모두 선택하고 선택을 반전시키는 기능을 구현합니다_AngularJS

WBOY원래의: 2016-05-16 15:27:191681검색

AngularJS는 애플리케이션 구축 시 HTML의 단점을 극복하도록 설계되었습니다. HTML은 정적 텍스트 표시를 위해 설계된 훌륭한 선언적 언어이지만 웹 애플리케이션을 구축하는 데에는 취약합니다. 그래서 나는 브라우저가 내가 원하는 것을 할 수 있도록 몇 가지 작업(원한다면 트릭)을 수행했습니다.

AngularJS의 네 가지 주요 기능 중 두 번째인 양방향 데이터 바인딩이 여기서 사용됩니다.

참고: DOM 코드는 단 한 줄도 작성되지 않았습니다! 이것이 ng의 장점입니다. 레이아웃용이며 JS 코드는 단순히 ng 모듈과 ng 컨트롤러를 생성합니다

효과:

<!DOCTYPE html>
<html lang="en" ng-app="myModule5"><!--3、ng-app="myModule5"启动ng并调用模块-->
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.css">
<title>全选/取消全选</title>
</head>
<body>
<div class="container" ng-controller="myCtrl5"><!--4、ng-controller="myCtrl5"启用控制器-->
<h2>全选和取消全选</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>选择</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input ng-checked="selectAll" type="checkbox">
</td>
<td>Tom</td>
<td>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>
<input ng-checked="selectAll" type="checkbox">
</td>
<td>Mary</td>
<td>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>
<input ng-checked="selectAll" type="checkbox">
</td>
<td>King</td>
<td>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
</tbody>
</table>
<input type="checkbox" ng-model="selectAll">
<span ng-hide="selectAll">全选</span>
<span ng-show="selectAll">取消全选</span>
</div>
<script src="js/angular.js"></script><!--1、引入angularJS-->
<script>
//2、创建自定义模块和控制器
angular.module('myModule5', ['ng']).
controller('myCtrl5', function($scope){
});
</script>
</body>
</html>

ps: AngularJs는 단순히 모든 선택 및 다중 선택 작업을 구현합니다

CURD를 처리(추가, 삭제, 수정, 확인)할 때 데이터를 일괄적으로 처리해야 하는 경우가 많습니다. 이때 다중 선택 작업을 사용해야 합니다.

Angular에서의 구현은 다음과 같습니다. (물론 제가 작성한 것보다 더 좋은 방법이 많이 있지만 여기서는 간단한 구현만 하겠습니다.)

HTML:

<section>
<pre class="brush:php;toolbar:false">{{choseArr}}

全选:

删除

페이지 효과는 다음과 같습니다. (CSS는 부트스트랩을 사용합니다.)

JS 코드:

$scope.tesarry=[‘1‘,‘2‘,‘3‘,‘4‘,‘5‘];//初始化数据
$scope.choseArr=[];//定义数组用于存放前端显示
var str="";//
var flag=‘‘;//是否点击了全选，是为a
$scope.x=false;//默认未选中
$scope.all= function (c,v) {//全选
if(c==true){
$scope.x=true;
$scope.choseArr=v;
}else{
$scope.x=false;
$scope.choseArr=[""];
}
flag=‘a‘;
};
$scope.chk= function (z,x) {//单选或者多选
if(flag==‘a‘) {//在全选的基础上操作
str = $scope.choseArr.join(‘,‘) + ‘,‘;
}
if (x == true) {//选中
str = str + z + ‘,‘;
} else {
str = str.replace(z + ‘,‘, ‘‘);//取消选中
}
$scope.choseArr=(str.substr(0,str.length-1)).split(‘,‘);
};
$scope.delete= function () {// 操作CURD
if($scope.choseArr[0]==""||$scope.choseArr.length==0){//没有选择一个的时候提示
alert("请至少选中一条数据在操作！")
return;
};
for(var i=0;i<$scope.choseArr.length;i++){
//alert($scope.choseArr[i]);
console.log($scope.choseArr[i]);//遍历选中的id
}
};

성명：

이전 기사：JSON 순회 방법 예시 summary_javascript 기술다음 기사：JSON 순회 방법 예시 summary_javascript 기술

AngularJS는 모두 선택하고 선택을 반전시키는 기능을 구현합니다_AngularJS

관련 기사