Maison > Article > interface Web > Angularjs implémente l'ajout, la suppression, la modification et le partage de code
Angularjs implémente l'ajout, la suppression, la modification et le partage de code
- 小云云original
- 2018-03-02 15:05:371376parcourir
Cet article partage principalement avec vous le code pour ajouter, supprimer, modifier et archiver angulairejs. J'espère qu'il pourra vous aider.
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript" src="libs/jquery-2.1.0.min.js"></script>
<style type="text/css">
* {
margin: 0px auto;
}
.p1 {
width: 800px;
}
table {
width: 800px;
margin-top: 10px;
}
input {
margin-top: 10px;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<p class="p1">
管理信息<br />
<button class="btn" ng-click="piliang1()" style="margin-left: 20px;">批量删除</button>
<span style="margin-left: 50px;"></span><input type="text" placeholder="按用户名查询" ng-model="uname" ng-keydown="inp_uname($event)" />
<select style="margin-left: 50px;" ng-model="paixu" ng-change="isPaixu()" ng-init="paixu='以年龄正序'">
<option>以年龄正序</option>
<option>以年龄倒序</option>
</select>
<button style="margin-left: 80px" ng-click="add()">添加</button>
<!--<input type="button" style="margin-left: 80px;" ng-click="tianjia()" value="添加"/>-->
<table border="1px" cellspacing="0px">
<tr>
<td><input type="checkbox" /></td>
<td>姓名</td>
<td>年龄</td>
<td>城市</td>
<td>录入日期</td>
<td>操作</td>
</tr>
<tr ng-repeat="u in unames | filter:uname">
<td><input type="checkbox" ng-click="xuan($index)" /></td>
<td>{{u.uname}}</td>
<td>{{u.age}}</td>
<td>{{u.city}}</td>
<td>{{u.riqi|date:"yyyy-MM-dd"}}</td>
<td><button ng-click="xiugai($index)">修改</button><button ng-click="shanchu($index)">删除</button></td>
</tr>
</table>
<fieldset style="text-align: center;" ng-show="xs">
<legend>用户信息</legend>
姓名<input type="text" ng-model="uname_xinxi" /><br />
年龄<input type="text" ng-model="age_xinxi" /><br />
城市<input type="text" ng-model="city_xinxi" /><br />
登录日期<input type="date" ng-model="riqi_xinxi" /><br />
<input type="button" value="OK" ng-click="ok()" ng-model="i" />
</fieldset>
</p>
<script type="text/javascript">
var mo = angular.module("myApp", []);
mo.controller("myCtrl", function($scope) {
//初始化数据
var arr = [{
"isChecked": false,
"uname": "张三",
"age": 25,
"city": "北京",
"riqi": new Date(231332).getTime()
}, {
"isChecked": false,
"uname": "李四",
"age": 34,
"city": "北京",
"riqi": new Date(6436654).getTime()
}, {
"isChecked": false,
"uname": "王五",
"age": 22,
"city": "上海",
"riqi": new Date(435435).getTime()
}];
var flag = true;
$scope.unames = arr;
//添加
$scope.add = function() {
flag = true;
$scope.xs = !$scope.xs;
};
//点击复选框改变选中状态
$scope.xuan = function($index) {
arr[$index].isChecked = !arr[$index].isChecked;
$scope.unames = arr;
}
//批量删除
$scope.piliang1 = function() {
//遍历
for (var i = arr.length - 1; i >= 0; i--) {
var c = arr[i].isChecked;
if (c) {
arr.splice(i, 1);
}
}
$scope.unames = arr;
}
//查询
$scope.inp_uname = function($event) {
var arr_temp = [];
var ketCode = $event.keyCode;
if (ketCode == 13) {
for (var i = 0; i < arr.length; i++) {
var n = arr[i].uname.toString();
if (n.indexOf($scope.uname) != -1) {
arr_temp.push(arr[i]);
}
}
$scope.unames = arr_temp;
}
}
//按年龄排序
$scope.isPaixu = function($index) {
var p = $scope.paixu;
if (p == "以年龄正序") {
arr.sort(function(a, b) {
return a.age - b.age;
});
} else if (p == "以年龄倒序") {
arr.sort(function(a, b) {
return b.age - a.age;
});
}
$scope.unames = arr;
}
//修改
$scope.xiugai = function($index) {
flag = false;
$scope.xs = true;
var name1 = $scope.unames[$index].uname;
var age1 = $scope.unames[$index].age;
var city1 = $scope.unames[$index].city;
var riqi1 = $scope.unames[$index].riqi; // alert(name1);
$scope.uname_xinxi = name1;
$scope.age_xinxi = age1;
$scope.city_xinxi = city1;
$scope.riqi_xinxi = riqi1;
$scope.i = $index;
console.log(name1+"--"+age1+"--"+city1+"--"+riqi1)
}
//点击ok修改数据
$scope.ok = function() {
if (flag) {
var obj = {
"uname": $scope.uname_xinxi,
"age": $scope.age_xinxi,
"city": $scope.city_xinxi,
"riqi": $scope.riqi_xinxi,
};
$scope.unames.push(obj);
$scope.xs = false;
} else {
var newperson = {
"ischecked": false,
"uname":$scope.uname_xinxi,
"age": $scope.age_xinxi,
"city": $scope.city_xinxi,
"riqi": $scope.riqi_xinxi,
};
arr.splice($scope.i, 1, newperson);
$scope.names = arr;
}
}
//删除
$scope.shanchu = function() {
//遍历
for (var i = arr.length - 1; i >= 0; i--) {
var d = arr[i];
}
arr.splice(d, 1);
}
})
</script>
</body>
</html></span>Recommandations associées :
Méthode d'ajout, de suppression, de modification et de vérification d'AngularJs
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!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：instance de méthode js pour obtenir des événements de clavierArticle suivant：instance de méthode js pour obtenir des événements de clavier
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