表单查询 排序 添加

最新推荐文章于 2022-05-25 16:42:32 发布
最新推荐文章于 2022-05-25 16:42:32 发布
阅读量560 收藏
点赞数
分类专栏： angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiaosheng1/article/details/78317623
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .addUser{
            width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3;
        }
    </style>
    <script src="angular.js"></script>
    <script src="angular-route.js"></script>
    <script type="text/javascript">
        var app=angular.module("myApp",["ngRoute"]);
        app.config(["$routeProvider",function($routeProvider){
            $routeProvider

                .when("/addUser",{
                    templateUrl:"addUser.html",
                    controller:"addUserCtrl"
                })

        }]);
        app.controller("myCtrl",function ($scope,$location) {
            $scope.users = [
                {"name": "张三", "zhi": "控球后卫", "hao": 11, "shu": 999,"state":false},
                {"name": "李四", "zhi": "大前锋", "hao": 21, "shu": 888,"state":false},
                {"name": "王五", "zhi": "小前锋", "hao": 23, "shu": 777,"state":false},
                {"name": "赵六", "zhi": "中锋", "hao": 10, "shu": 666,"state":false},
                {"name": "周七", "zhi": "得分后卫", "hao": 1, "shu": 555,"state":false}
            ];
            $scope.goToUrl = function(url){
                $location.path(url);
            };
        });
            app.controller("addUserCtrl",function($scope){

                $scope.a = "";
                $scope.b = "";
                $scope.c = "";
                $scope.d = "";


                //提交按钮的点击事件
                $scope.tijiao = function(){
                    var flag = true;
                    //拿到各个输入框的值
                    if($scope.a==""||$scope.a==null){
                        alert("姓名不能为空");
                        flag = false;
                    }
                    if($scope.b==""||$scope.b==null){
                        alert("位置不能为空");
                        flag = false;
                    }
                    if($scope.c==""||$scope.c==null){
                        alert("球号不能为空");
                        flag = false;
                    }
                    if($scope.d==""||$scope.d==null){
                        alert("票数不能为空");
                        flag = false;
                    }


                    if(flag){

                        $scope.duixiang ={
                            name:$scope.a,
                            zhi:$scope.b,
                            hao:$scope.c,
                            shu:$scope.d,
                            state:false
                        };
                        $scope.users.push($scope.duixiang);
                    }
                };

            });

    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
    <h3>球员信息表</h3>
    <div>
        查询<input ng-model="search" placeholder="用户名查询" size="10">
        排序<select id="shu" ng-model="b">
              <option value="">票数倒序</option>
              <option value="-">票数正序</option>
            </select><br><br>
        <button class="addUser" ng-click="goToUrl('/addUser')" style=" background:blue;">新增球员</button>
    </div>
    <div>
    <table border="1" cellspacing="1" cellpadding="10">
        <thead>
          <tr>
              <th>姓名</th>
              <th>位置</th>
              <th>球号</th>
              <th>票数</th>
          </tr>
        </thead>
        <tbody>
        <tr ng-repeat="user in users|filter:{name:search}|orderBy:b+a">


            <td>{{user.name}}</td>
            <td>{{user.zhi}}</td>
            <td>{{user.hao }}</td>
            <td>{{user.shu}}</td>

        </tr>
        </tbody>
    </table>
    </div><br>
    <div ng-view>

    </div>
    <!-- 1.添加用户页面 -->
    <script type="text/ng-template" id="addUser.html">
        <table border="1" cellpadding="10" cellspacing="1">
            <tbody>
            <tr>
                <th>姓名:</th>
                <td><input type="text" ng-model="a"></td>
            </tr>
            <tr>
                <th>位置:</th>
                <td><input type="text" ng-model="b"></td>
            </tr>
            <tr>
                <th>球号:</th>
                <td><input type="text" ng-model="c"></td>
            </tr>
            <tr>
                <th>票数:</th>
                <td><input type="text" ng-model="d"></td>
            </tr>

            <tr>

            <tr align="center">
                <td colspan="2">
                    <input type="button" value="提交" ng-click="tijiao()" />
                </td>
            </tr>
            </tbody>
        </table>
    </script>
    <!--指定相应内容-->

</center>
</body>
</html>
JSHeng@
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 表单排序
08-25
html 表单的排序 html 表单的排序 html 表单的排序
javascript表单排序
04-29
在本主题中，我们将深入探讨如何使用JavaScript对表单数据进行排序。表单数据排序是网页应用中常见的需求，例如，用户可能需要按照特定字段对搜索结果或列表进行升序或降序排列。 首先，理解表单的基本结构至关重要...
表单排序问题
小小争520
03-30 2039
代码： A.HTML <input type="button" value="按年龄排序" id="btn1"> <input type="button" value="按姓名排序" id="btn2"> <div class="box" id="box"></div> B.CSS <style> table{ ...
表单排序实例
hwctl的专栏
05-11 753
                                  name     id               aaa     001               ccc     009               ddd     003               bbb     004                    点击表头排序          var   zd=true;/
表单验证+添加+查询+排序+删除
你的孤独，虽败犹荣的博客
12-10 216
1.布局     2.定义数组，自拟4条数据     3.用ng-repeat讲数组中的数据添加到表格中     4.用filter进行搜索     5.点击按钮把未发货的状态改为已发货的状态     6.通过选中checkbox 把已发货的状态删除     7.价钱：用currercy   时间：date:'MM-dd hh:mm:ss'     8.span显示提示错误的信息  
实现一个简单的表单排序
adb96102的博客
04-07 177
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Cities</title> </h...
jquery表单文本框添加文字标签特效代码
03-20
在本文中，我们将深入探讨如何使用jQuery库来创建一个功能丰富的表单文本框，该文本框具有添加文字标签的特效，允许用户通过回车键添加标签，并能对这些标签进行拖动以调整顺序。这个特性在许多现代网页应用中非常...
vue添加查询删除练习
最新发布
05-26
在"vue添加查询删除练习"中，我们将探讨如何使用Vue.js实现数据的增删查改功能，这些都是开发Web应用时常见的需求。 首先，我们需要理解Vue.js的核心概念。Vue.js通过声明式的数据绑定使得开发者能够轻松地管理DOM...
student_information.zip_学生信息管理系统_添加查询
09-19
在这个系统中，"添加查询"功能是核心部分，它允许管理员或者教师方便地进行数据录入和信息查找，确保学生数据的准确性和及时性。下面我们将深入探讨这个系统的一些关键知识点。 1. 数据库设计：学生信息管理系统的...
jQuery自定义添加编辑删除表单模块及拖拽排序代码
06-10
本项目"jQuery自定义添加编辑删除表单模块及拖拽排序代码"是针对Web开发中常见需求的一个实现，旨在帮助开发者创建可自定义编辑、删除的表单模块，并且支持元素的拖拽排序功能。以下将详细讲解这个项目中的关键知识...
页面上实现表格数据排序
BEYOND的博客
03-21 2716
源码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;style&gt; .table{ width: 400px; height: 180px; margin: auto; text-align: center; } .table th, .table td { width: 50px; height: 60p...
关于form表单排版的技巧
11-02 920
//此处说明一个对于排版表单的方法将form表单嵌套在table里，因为table是格式化的，所以就不用再手动排版了源码如下 <from action="" method="get/post"> <table> <tr> <td>用户名：</td> <td><input type="text" n...
常用的表单参数排序验签
286
03-28 451
        在微信或支付宝等应用接入过程中，经常会用到传递参数的验证操作，以下就是最常用的一种： import java.net.URLEncoder; import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; import java.util.ArrayList; imp...
js 处理form表单整理成数组，结合php 完成排序功能的实现
廖圣平
08-08 839
/** * 排序操作 */ $('#button_listorder').click(function() { // 获取 listorder内容 var data = $("#from_listorder").serializeArray(); postData = {}; $(data).each(function(i){ postDat
form表单排序号自动生成
qq_41393222的博客
05-25 792
一、问题或解决方法应用场景。 数据展示或者统计的时候，经常需要在每一行数据前加入排序号，这里提供一下自动生成排序号的方法。 二、直接粘贴代码获取图片 1.这种方式引用在asp.net中，Repeater直接获取数据的时候， 其中Page需要提前赋初值。 <%# Container.ItemIndex + 1 + (Convert.ToInt32(q("Page")==""?"1":q("Page")) - 1) * 10%> 2. js调用接口 <s...
表单的布局
chenmo2001的博客
05-27 2191
表单的布局 自从Bootstrap使用display:block和width:100%在全部的input控件上后，表单默认都是基于垂直堆叠排列的，可以使用其他Class类来改变表单的布局。 .form-group（表单组） .form-group 可以向为表单赋予一些结构样式，目的是提供标签的控制配对以及margin-bottom属性，由于它是一个类选择器，可以在<div>或其他元素中使用它。 例如： <form> <div class="form-g...
html排列表单形式,[列表] [form表单]
weixin_39637179的博客
06-21 327
1 有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种(重要)？ 如何嵌套？有序列表 使用编号来记录项目顺序 【适用于有先后顺序的项目】第一行第二行第三行tip有序列表在margin：0和padding：0的情况下，和无序列表效果相同无序列表 使用符号来记录无序项目【适用于并列项目】行行行行行行行行行自定义列表 由定义条件和定义描述组成【适用于...
水平排列的表单
Byte_Dance的博客
03-06 2169
1 :  form表单标签要添加 class="form-horizontal" 表示水平排列 2 : 内部div标签要添加 class="form-group" 表示一个表单组的元素 3 : div内部的label要添加 class="col-sm-1 control-label" 表示一个label占一格,且右对齐 4 : 下层的div要添加  class="col-sm-11" ...
vue gride表单箭头排序切换
03-26
在Vue Grid表单中，可以使用自定义方法来切换箭头排序。 1. 定义一个data属性来控制排序： ``` data() { return { sortDirection: true } } ``` 2. 在表头处添加一个点击事件，用于触发排序方法： ``` ('...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值