angular表格操作,删除,添加,修改

<script src="../jquery-2.1.0.js" type="text/javascript"></script>
<script src="../angular.js"></script>
<script src="../angular-route.js"></script>

<script>
var app=angular.module("app",["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider.when("/tian",{
templateUrl:"tian.html",
controller:"ctr"
}).when("/up",{
templateUrl:"up.html",
controller:"ctr"
});
});
var user=[{"id":"1","name":"张三","pwd":"111","age":"20","sex":"男"},
{"id":"2","name":"李四","pwd":"222","age":"21","sex":"女"},
{"id":"3","name":"王五","pwd":"333","age":"22","sex":"男"}];
app.controller("ctr",function ($scope,$location) {
$scope.data=user;
//全部删除
$scope.del=function () {
$scope.data.splice($scope.data);
}
//添加用户
$scope.add=function (path) {
$location.path(path);
}
$scope.dd=function () {
var uername={id:$scope.id,name:$scope.name,pwd:$scope.pwd,age:$scope.age,sex:$scope.sex}
$scope.data.push(uername);
}
//修改密码
$scope.xiu=function (path) {
$location.path(path);
alert(0)
}
var li=0;
$scope.upp=function ($index) {
$scope.newpwdd=$scope.data[$index].pwd;
$scope.newname=$scope.data[$index].name;
li=$index;
}
$scope.gmm=function () {
$scope.data[li].pwd=$scope.pass; } })</script>
<div class="tou">
用户名:<input type="text" ng-model="names" class="name"> 年龄:<input type="text" ng-model="ages" class="age">
<select ng-model="sexs" class="sex">
<option></option>
<option>男</option>
<option>女</option>
</select>
<button ng-click="del()">全部删除</button>
</div>
<table>
<tr>
<td>编号</td>
<td>姓名</td>
<td>密码</td>
<td>年龄</td>
<td>性别</td>
<td>操作</td>
</tr>
<tr ng-repeat="item in data | filter:{'name':names}| filter:{'age':ages} | filter:{'sex':sexs}">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.pwd}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td><button ng-click="xiu('/up');upp($index)">修改密码</button></td>
</tr>
</table>
<button ng-click="add('/tian')">添加用户</button>
<script id="tian.html" type="text/ng-template">
<form action="#">
<table>
<tr>
<td>id:</td>
<td><input type="text" ng-model="id"></td>
</tr>
<tr>
<td>姓名:</td>
<td><input type="text" ng-model="name"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="text" ng-model="pwd"></td>
</tr>
<tr>
<td>年龄:</td>
<td><input type="text" ng-model="age"></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="text" ng-model="sex"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" ng-click="dd()" value="提交" /></td> </tr> </table> </form></script><script type="text/ng-template" id="up.html"><form action="#"> <table> <tr> <td>用户名: </td> <td><input type="text" ng-model="newname" /></td> </tr> <tr> <td>旧密码: </td> <td><input type="text" ng-model="newpwdd" /></td> </tr> <tr> <td>新密码:</td> <td><input type="text" ng-model="pass" /></td> </tr> <tr> <td>确认密码:</td> <td><input type="text" /></td> </tr> <tr> <td colspan="2" align="center"> <input type="button" ng-click="gmm()" value="提交" /> </td> </tr> </table></form></script><div ng-view=""></div>

原文地址:https://www.cnblogs.com/zzwerzi/p/7563489.html