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>
    
    
  • 相关阅读:
    JSP的组成
    什么是JSP
    JSP和Servlet分工图
    Linux逻辑卷管理LVM2详解
    ESXi主机和NTP server快速进行时间同步
    VMwareCLI命令参考
    使用Logminer工具分析DML和DDL操作
    TKPROF使用
    iSCSI存储设备的udev绑定 以及iscsi重启卡住解决方法
    Oracle 10g EM证书问题
  • 原文地址:https://www.cnblogs.com/zzwerzi/p/7563489.html
Copyright © 2011-2022 走看看