zoukankan      html  css  js  c++  java
  • 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>
    
    
  • 相关阅读:
    20174303刘金晖 Exp 8 Web基础
    2019-2020-2 网络对抗技术 20174303刘金晖 Exp7 网络欺诈防范
    20174303刘金晖 Exp6 MSF基础应用
    20174303刘金晖 Exp5 信息搜集与漏洞扫描
    20174303刘金晖 Exp4 恶意代码分析
    2019-2020-2 20174303刘金晖 Exp3 免杀原理与实践
    2019-2020-2 20174303刘金晖 Exp2 后门原理与实践
    2019-2020-2 20174303刘金晖 Exp1 PC平台逆向破解
    20174307周俊锴《网络对抗技术》Exp9 Web安全基础
    20174307周俊锴Exp8 Web基础
  • 原文地址:https://www.cnblogs.com/zzwerzi/p/7563489.html
Copyright © 2011-2022 走看看