Angular js는 사용자 추가 등 포괄적인 작업 방법을 구현합니다.
- 小云云원래의
- 2018-01-03 13:11:571136검색
이 글은 주로 Angular js의 사용자 추가, 비밀번호 변경, 민감한 단어, 드롭다운 메뉴 등의 종합적인 조작 방법을 소개하고 있으니, 도움이 필요한 친구들이 참고하시면 좋겠습니다.
지난 글에서 편집자님께서 AngularJS 퍼지 쿼리 기능 구현 코드(컨텐츠 드롭다운 메뉴 필터링, 정렬, 민감한 문자 필터링, 검증 및 판단 후 테이블 정보 추가)를 소개해 주셨는데, 오늘은 Angular js를 소개하겠습니다. 사용자 추가, 비밀번호 변경 및 민감한 단어를 구현하기 위한 드롭다운 메뉴의 포괄적인 작업 방법에 대한 구체적인 내용은 다음과 같습니다.
더 이상 말도 안 되는 소리는 하지 마세요. 구체적인 코드는 다음과 같습니다. 다음:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
border-collapse: collapse;
}
th,td{
padding: 10px;
border: 1px solid #000000;
}
</style>
<script src="../angular-1.5.5/angular.min.js"></script>
<script>
var myapp = angular.module("myapp",[]);
myapp.controller("myCtrl",function ($scope) {
$scope.data = [{
"id":1,
"name":"张三",
"pwd":"123",
"age":22,
"sex":"男",
"check":false
},
{
"id":2,
"name":"李四",
"pwd":"456",
"age":33,
"sex":"男",
"check":false
},
{
"id":3,
"name":"王五",
"pwd":"789",
"age":44,
"sex":"女",
"check":false
}];
$scope.show = false;
//添加用户
$scope.add = function () {
$scope.show = true;
}
//添加
$scope.submit = function () {
if($scope.name==""){
alert("请输入姓名")
}else if($scope.correct==true){
//进行修改的操作
$scope.data[$scope.index].pwd = $scope.pwd;
}else{
//添加的操作
$scope.data.push({"name":$scope.name,"pwd":$scope.pwd,"age":$scope.age,"sex":$scope.sex});
$scope.show = false;
}
}
//用户名查询。不能含有敏感字
$scope.search = "";
$scope.search2 ="";
//监听输入框的内容
$scope.$watch("search",function (value) {
if(value.indexOf("我")!=-1){
alert("含有敏感字");
$scope.search = "";
}else{
$scope.search2 = $scope.search;
}
});
//年龄筛选
$scope.opt = "请选择";
$scope.ageFilter = function (item) {
if($scope.opt!="请选择"){
var opt = $scope.opt;
var ageArr = opt.split("-");
var max = ageArr[1];
var min = ageArr[0];
var age = item.age;
if(age<min||age>max){
return false;
}else{
return true;
}
}else{
return true;
}
};
//性别筛选
$scope.sexthis = "请选择";
$scope.sexFun = function (item) {
if($scope.sexthis!="请选择"){
//如果性别==男||性别==女
if(item.sex==$scope.sexthis)
{
return true;
}else{
return false;
}
}else{
return true;
}
}
//全选
$scope.checkAll = false;
$scope.checkWhat = function () {
if ($scope.checkAll == true) {
for (var i = 0; i < $scope.data.length; i++) {
$scope.data[i].check = true;
}
} else {
for (var i = 0; i < $scope.data.length; i++) {
$scope.data[i].check = false;
}
}
};
//反选
var n = 0;
$scope.checkIt =function (index) {
console.log(index)
if($scope.data[index].check==true){
n++;
}else{
n--;
}
if(n==$scope.data.length){
$scope.checkAll=true;
}else{
$scope.checkAll = false;
}
};
//点击修改密码
$scope.correct = function (index) {
$scope.show = true;
$scope.name = $scope.data[index].name;
$scope.pwd = $scope.data[index].pwd;
//写入一个状态值
$scope.correct = true;
//记录索引
$scope.index = index;
}
//全部删除
$scope.delAll = function () {
$scope.data.length=0;
}
//批量删除
$scope.del = function () {
for(var i = 0;i<$scope.data.length;i++){
if($scope.data[i].check ==true){
$scope.data.splice(i,1);
i--;
}
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h2>用户信息表</h2>
<input type="text" placeholder="用户名查询" ng-model="search">
年龄<select ng-model="opt" ng-change="fun()">
<option>请选择</option>
<option>10-20</option>
<option>20-30</option>
<option>30-40</option>
</select>
性别<select ng-model="sexthis" ng-change="fun()">
<option>请选择</option>
<option>男</option>
<option>女</option>
</select>
<button ng-click="delAll()">全部删除</button>
<button ng-click="del()">批量删除</button>
<table>
<thead>
<tr>
<th><input type="checkbox" ng-model="checkAll" ng-click="checkWhat()"></th>
<th>id</th>
<th>用户名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data|filter:{name:search2}|filter:ageFilter|filter:sexFun">
<td><input type="checkbox" ng-model="item.check" ng-click="checkIt($index)"></td>
<td>{{$index}}</td>
<td>{{item.name}}</td>
<td>{{item.pwd}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td><button ng-click="correct($index)">修改密码</button></td>
</tr>
</tbody>
</table>
<button ng-click="add()">添加用户</button>
<ul ng-show="show">
<li>用户名<input type="text" placeholder="请输入用户名" ng-model="name"></li>
<li>密码<input type="text" placeholder="请输入密码" ng-model="pwd"></li>
<li>年龄<input type="text" placeholder="请输入年龄" ng-model="age"></li>
<li>性别<input type="text" placeholder="请输入性别" ng-model="sex"></li>
<li><button ng-click="submit()">提交</button></li>
</ul>
</body>
</html>
관련 권장 사항:
PHP를 사용하여 windows_PHP 튜토리얼에 사용자를 추가하는 방법
Angularjs를 사용하여 비밀번호를 변경하는 방법 예제 코드 공유
위 내용은 Angular js는 사용자 추가 등 포괄적인 작업 방법을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.