Angular JS 添加、删除、查询

来源：互联网发布：阿里云最便宜的服务器编辑：程序博客网时间：2024/05/16 19:23
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        table{            border-collapse: collapse;        }        th,td{            padding: 15px;            border: 1px solid #000000;        }    </style>    <script src="../../angular-1.5.5/angular.min.js"></script>    <script>        //声明主模块        var myapp=angular.module("myapp",[]);        //添加控制器        myapp.controller("myCtrl",function ($scope) {            //模拟数据            $scope.users=[                {                    'url':"images/1.png",                    'name':"Westbrook",                    'wz':"得分后卫（SG）",                    "age":24,                    "qd":"雷霆",                    "page":1900                },                {                    'url':"images/2.png",                    'name':"James",                    'wz':"大前锋（PF）",                    "age":23,                    "qd":"骑士",                    "page":1900                },                {                    'url':"images/3.png",                    'name':"Curry",                    'wz':"得分后卫（SG）",                    "age":30,                    "qd":"勇士",                    "page":1800                },                {                    'url':"images/4.png",                    'name':"Harden",                    'wz':"小前锋（SG）",                    "age":13,                    "qd":"火箭",                    "page":1800                },                {                    'url':"images/5.png",                    'name':"Durant",                    'wz':"得分后卫（SG）",                    "age":35,                    "qd":"勇士",                    "page":1712                }            ];            //添加新球员            $scope.add=function () {                // 向数组中添加数据                $scope.users.push({'url':"images/6.png",'name':$scope.name,'wz':$scope.wz,'age':$scope.age,'qd':$scope.qd,"page":0});                // 清空输入框                $scope.name = '';                $scope.wz = '';                $scope.age = '';                $scope.qd = '';            }            //年龄过滤查询            $scope.ageSize="--请选择--";            $scope.fun=function(){                console.log($scope.ageSize);            };            $scope.ageFilter=function(item){                //console.log(item.age);                if($scope.ageSize!="--请选择--"){                    var ageSize=$scope.ageSize;                    var ageArr=ageSize.split("-");                    var min=ageArr[0];                    var max=ageArr[1];                    var age=item.age;                    if(age>max||age<min){                        return false;                    }else{                        return true;                    }                }else{                    return true;                }            };            //投票            $scope.tp=function (item) {                item.page++;            }        })    </script></head><body ng-app="myapp" ng-controller="myCtrl"><h1>添加新球员</h1>姓名：<input type="text" ng-model="name"><br/>位置：<input type="text" ng-model="wz"><br/>年龄：<input type="text" ng-model="age"><br/>球队：<input type="text" ng-model="qd"><br/><button ng-click="add()">添加新球员</button><h2>用户信息表</h2><input type="text" placeholder="用户名查询" ng-model="sel">年龄：<select ng-model="ageSize">        <option>--请选择--</option>        <option>0-10</option>        <option>11-20</option>        <option>21-30</option>        <option>31-40</option>    </select><table>    <thead>        <tr>            <td>球员</td>            <td>姓名</td>            <td>位置</td>            <td>年龄</td>            <td>球队</td>            <td>得票数</td>            <td>操作</td>        </tr>    </thead>    <tbody>        <tr ng-repeat="item in users|filter:{name:sel}|filter:ageFilter">            <td><img ng-src="{{item.url}}"></td>            <td>{{item.name}}</td>            <td>{{item.wz}}</td>            <td>{{item.age}}</td>            <td>{{item.qd}}</td>            <td>{{item.page}}</td>            <td><button ng-click="tp(item)">投票</button></td>        </tr>    </tbody></table></body></html>
阅读全文
0 0