Angular JS 添加、删除、查询

最新推荐文章于 2024-03-06 05:24:22 发布

习惯了沉默012

最新推荐文章于 2024-03-06 05:24:22 发布

阅读量249

点赞数

分类专栏： AngularJS

本文链接：https://blog.csdn.net/huakaihualuo012/article/details/78301822

版权

AngularJS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

习惯了沉默012

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular JS 添加、删除、查询

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; table{ border-
复制链接

扫一扫