Maison >interface Web >js tutoriel >Angular js implémente des méthodes de fonctionnement complètes telles que l'ajout d'utilisateurs
Angular js implémente des méthodes de fonctionnement complètes telles que l'ajout d'utilisateurs
- 小云云original
- 2018-01-03 13:11:571248parcourir
Cet article présente principalement la méthode de fonctionnement complète pour l'ajout d'utilisateurs, la modification des mots de passe, les mots sensibles et les menus déroulants dans Angular js. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.
Dans le dernier article, l'éditeur vous a présenté le code d'implémentation de la fonction de requête floue d'AngularJS (menu déroulant de filtrage du contenu, tri, filtrage des caractères sensibles, vérification et jugement, et ajout d'informations dans le tableau). vous présente Angular js pour implémenter l'ajout et la modification d'utilisateurs. Les méthodes de fonctionnement complètes pour les mots de passe, les mots sensibles et les menus déroulants sont les suivantes :
Sans plus tarder, je publierai le code directement pour vous. le code spécifique est le suivant :
<!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>
Recommandations associées :
Explication détaillée des opérations Mysql telles que l'ajout d'utilisateurs et l'autorisation
Comment utiliser PHP pour ajouter des utilisateurs à Windows_PHP tutoriel
Comment utiliser Angularjs pour changer de mot de passe, exemple de partage de code
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript