溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹AngularJS如何實現添加用戶、修改密碼、敏感字、下拉菜單的綜合操作方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
小編在上篇文章給大家介紹了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.search3 ="";
//監聽輸入框的內容
$scope.$watch("search",function (value) {
if(value.indexOf("我")!=-1){
alert("含有敏感字");
$scope.search = "";
}else{
$scope.search3 = $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">
<h3>用戶信息表</h3>
<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:search3}|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>以上是“AngularJS如何實現添加用戶、修改密碼、敏感字、下拉菜單的綜合操作方法”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
