AngularJS（DIY）

来源：互联网发布：未来城网络黄金ios下载编辑：程序博客网时间：2024/05/24 01:49

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="angular1.4.6.min.js"></script>    <script src="jquery-3.2.1.js"></script>    <script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>    <style>        .div.top {            height: 80px;            width: 800px;        }        .div_center{            margin-top: 20px;            height:auto;            width: 800px;        }        .div_content{            width: 800px;            height: 500px;        }    </style></head><body ng-app="myApp" ng-controller="myController">    <script>        //路由操作        var myApp = angular.module("myApp", ['ngRoute']);        myApp.config(function ($routeProvider) {            $routeProvider.when("/add", {                templateUrl: "add.html",                controller: "addCtrl"            }).when("/update", {                templateUrl: "update.html",                controller: "updateCtrl"            })        });        <!-- 初始化数据操作-->        myApp.controller("myController", function ($scope) {            $scope.data = [                {id: 1, name: "张三", pass: 111, age: 20, sex: "男"},                {id: 2, name: "李四", pass: 222, age: 21, sex: "男"},                {id: 3, name: "王五", pass: 333, age: 22, sex: "男"},            ]            //删除操作            $scope.del=function () {                $scope.data=[];            }        });        <!-- 添加操作-->        myApp.controller("addCtrl",function ($scope) {            $scope.tijiao=function () {                var newUser={                    id:$scope.id,                    name:$scope.name,                    pass:$scope.pass,                    age:$scope.age,                    sex:$scope.sex                };                $scope.data.push(newUser)            }        });        <!-- 修改操作-->        myApp.controller("updateCtrl",function ($scope) {            var ii=0;            $scope.tijiao=function () {                 $scope.data[ii].pass=$scope.newpass;             }        });    </script>    <center>        <div class="div_top">            用户名：<input type="text" ng-model="searchname" placeholder="用户名查询">            年龄：<input type="text" ng-model="searchage" placeholder="年龄范围查询">            性别：<select ng-model="sex">            <option></option>            <option>男</option>            <option>女</option>        </select>            <button ng-click="del()">全部删除</button>        </div>        <div class="div_center">            <table border="1px solid" cellpadding="20px">                <thead>                <th>                    id                </th>                <th>                    用户名                </th>                <th>                    密码                </th>                <th>                    年龄                </th>                <th>                    性别                </th>                <th>                    操作                </th>                </thead>                <tbody>                <tr ng-repeat="item in data | filter:searchname | filter:searchage | filter:sex">                    <td>{{item.id}}</td>                    <td>{{item.name}}</td>                    <td>{{item.pass}}</td>                    <td>{{item.age}}</td>                    <td>{{item.sex}}</td>                    <td>                        <button ng-click="up($index)"><a href="#update">修改密码</a></button>                    </td>                </tr>                </tbody>            </table>        </div>        <button style="width: 100px;margin-top: 10px"><a href="#add">添加用户</a></button>        <div ng-view="" class="div_content" >        </div>    </center></body></html>

//add页面

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .div_add{            margin-top: 10px;            line-height: 30px;        }    </style></head><body><ceter>    <div class="div_add">        id：<input type="text" ng-model="id"><br>        用户名：<input type="text" ng-model="name"><br>        密码：<input type="text" ng-model="pass"><br>        年龄：<input type="text" ng-model="age"><br>        性别：<input type="text" ng-model="sex"><br>        <button ng-click="tijiao()">提交</button>    </div></ceter></body></html>

阅读全文

1 0