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

标签：ctr   mode   click   删除   user   put   oca   val   用户名   

<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>

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

标签：ctr   mode   click   删除   user   put   oca   val   用户名   

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