添加新球员

最新推荐文章于 2025-06-24 08:44:28 发布

android1986

最新推荐文章于 2025-06-24 08:44:28 发布

阅读量97

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wsq110/p/7710998.html

本文介绍了一个使用AngularJS实现的球员信息管理系统，包括添加球员、显示球员信息和基本的筛选功能。系统通过AngularJS模块化定义，实现了数据双向绑定和DOM操作的解耦。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟考试</title>
    <script src="../../angular-1.5.5/angular.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.name="";
            $scope.wz="";
            $scope.age="";
            $scope.qd="";
            $scope.add=function () {
                $scope.users.push({'url':"images/5.png",'name':$scope.name,'wz':$scope.wz,'age':$scope.age,'qd':$scope.qd})
            }

        });
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
    <h2>添加新球员</h2>
    姓名:<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><br>
    <h1>用户信息表</h1>
    <input type="text" placeholder="用户名查询" ng-model="select">
    年龄:<select>
        <option>--请选择--</option>
        <option>10-20</option>
        <option>20-30</option>
        <option>30-40</option>
    </select>
    <table border="1" cellspacing="0" cellpadding="5">
        <thead>
        <tr>
            <th>球员</th>
            <th>姓名</th>
            <th>位置</th>
            <th>年龄</th>
            <th>球队</th>
            <th>得票数</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in users|filter:select">
            <td><img 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>投票</button></td>
        </tr>
        </tbody>
    </table>
</body>
</html>