zoukankan      html  css  js  c++  java
  • 添加新球员

    <!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>
  • 相关阅读:
    “无法从http://XXX/XXX.svc?wsdl获取元数据”错误的解决方法
    闹洞房小游戏
    第3章 Oracle实例的管理
    公积金余额查询电话
    人要有忧患意识
    第0章 Oracle的安装及相关配置
    第5章 重做日志文件
    oracle体系结构视频学习笔记
    编写存储过程实现查询mysql数据库中的表名并删除表中的数据
    第6章 表空间和数据文件的管理
  • 原文地址:https://www.cnblogs.com/wsq110/p/7710998.html
Copyright © 2011-2022 走看看