AngularJS如何實(shí)現(xiàn)添加用戶、修改密碼、敏感字、下拉菜單的綜合操作方法
這篇文章主要介紹AngularJS如何實(shí)現(xiàn)添加用戶、修改密碼、敏感字、下拉菜單的綜合操作方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
成都創(chuàng)新互聯(lián)于2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、成都做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元金沙做網(wǎng)站,已為上家服務(wù),為金沙各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575
小編在上篇文章給大家介紹了AngularJS模糊查詢功能實(shí)現(xiàn)代碼(過(guò)濾內(nèi)容下拉菜單排序過(guò)濾敏感字符驗(yàn)證判斷后添加表格信息)，今天給大家介紹Angular js 實(shí)現(xiàn)添加用戶、修改密碼、敏感字、下拉菜單的綜合操作方法，具體內(nèi)容如下所示：
<!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("請(qǐng)輸入姓名")
}else if($scope.correct==true){
//進(jìn)行修改的操作
$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 ="";
//監(jiān)聽(tīng)輸入框的內(nèi)容
$scope.$watch("search",function (value) {
if(value.indexOf("我")!=-1){
alert("含有敏感字");
$scope.search = "";
}else{
$scope.search3 = $scope.search;
}
});
//年齡篩選
$scope.opt = "請(qǐng)選擇";
$scope.ageFilter = function (item) {
if($scope.opt!="請(qǐng)選擇"){
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 = "請(qǐng)選擇";
$scope.sexFun = function (item) {
if($scope.sexthis!="請(qǐng)選擇"){
//如果性別==男||性別==女
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;
}
};
//點(diǎn)擊修改密碼
$scope.correct = function (index) {
$scope.show = true;
$scope.name = $scope.data[index].name;
$scope.pwd = $scope.data[index].pwd;
//寫入一個(gè)狀態(tài)值
$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>請(qǐng)選擇</option>
<option>10-20</option>
<option>20-30</option>
<option>30-40</option>
</select>
性別<select ng-model="sexthis" ng-change="fun()">
<option>請(qǐng)選擇</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="請(qǐng)輸入用戶名" ng-model="name"></li>
<li>密碼<input type="text" placeholder="請(qǐng)輸入密碼" ng-model="pwd"></li>
<li>年齡<input type="text" placeholder="請(qǐng)輸入年齡" ng-model="age"></li>
<li>性別<input type="text" placeholder="請(qǐng)輸入性別" ng-model="sex"></li>
<li><button ng-click="submit()">提交</button></li>
</ul>
</body>
</html>以上是“AngularJS如何實(shí)現(xiàn)添加用戶、修改密碼、敏感字、下拉菜單的綜合操作方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
分享題目：AngularJS如何實(shí)現(xiàn)添加用戶、修改密碼、敏感字、下拉菜單的綜合操作方法
標(biāo)題路徑：http://jinyejixie.com/article4/gcsjoe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、定制開(kāi)發(fā)、網(wǎng)站排名、網(wǎng)站內(nèi)鏈、ChatGPT、面包屑導(dǎo)航
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 電子商務(wù)網(wǎng)站建設(shè)時(shí)要注意的問(wèn)題？ 2015-08-12
- 電子商務(wù)類APP開(kāi)發(fā)的4點(diǎn)建議 2015-11-11
- 電子商務(wù)網(wǎng)站SEO優(yōu)化方案分享 2013-11-15
- 創(chuàng)新互聯(lián)：什么是電商訂單管理？電子商務(wù)訂單管理的要點(diǎn) 2022-11-13
- 電子商務(wù)網(wǎng)站建設(shè)中數(shù)據(jù)庫(kù)的安全對(duì)策 2022-05-12
- 企業(yè)如何開(kāi)展電子商務(wù)? 2021-08-05
- 電子商務(wù)網(wǎng)站需重視同買家的實(shí)時(shí)交流 2021-07-16
- 電子商務(wù)公司如何競(jìng)爭(zhēng)力 2023-01-07
- 電子商務(wù)網(wǎng)絡(luò)營(yíng)銷推廣方法優(yōu)缺點(diǎn)總結(jié) 2022-11-12
- 電子商務(wù)網(wǎng)站建設(shè) –建立容易品牌推廣難 2021-07-07
- 怎樣做好電子商務(wù)網(wǎng)站 2016-12-14
- 垂直型B2C電子商務(wù)營(yíng)銷模式和策略（下） 2022-01-15