Home > Article > Web Front-end > Angularjs implements addition, deletion, modification and code sharing
Angularjs implements addition, deletion, modification and code sharing
- 小云云Original
- 2018-03-02 15:05:371341browse
This article mainly shares with you the code for adding, deleting, modifying and checking in angularjs. I hope it can help you.
<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>Related recommendations:
AngularJs add, delete, modify and check method
The above is the detailed content of Angularjs implements addition, deletion, modification and code sharing. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：js method instance for obtaining keyboard eventsNext article：js method instance for obtaining keyboard events