GVKun编程网logo

Angularjs过滤器完成排序功能实例详解（angularjs 过滤器）

18

本文的目的是介绍Angularjs过滤器完成排序功能实例详解的详细情况，特别关注angularjs过滤器的相关信息。我们将通过专业的研究、有关数据的分析等多种方式，为您呈现一个全面的了解Angular

本文的目的是介绍Angularjs过滤器完成排序功能实例详解的详细情况，特别关注angularjs 过滤器的相关信息。我们将通过专业的研究、有关数据的分析等多种方式，为您呈现一个全面的了解Angularjs过滤器完成排序功能实例详解的机会，同时也不会遗漏关于angularjs – angular.js过滤器的反极性、angularjs – 如何调用具有多个参数的Angular.js过滤器？、Angularjs使用过滤器完成排序功能、AngularJS学习笔记之表单验证功能实例详解的知识。

本文目录一览：

Angularjs过滤器完成排序功能实例详解（angularjs 过滤器）

Angularjs过滤器完成排序功能实例详解（angularjs 过滤器）

本文主要和大家详细介绍了Angularjs使用过滤器完成排序功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。


<!DOCTYPE html> 
<html> 
<head> 
<Meta charset=UTF-8> 
<title></title> 
<script type=text/javascript src=js/angularjs.js ></script> 
<link rel=stylesheet href=css/bootstrap.css rel=external nofollow /> 
<script> 
angular.module('myApp',[]) 
.service('data',function(){ 
return [ 
{id:1234,name:'ipad',price:3400}, 
{id:1244,name:'aphone',price:6400}, 
{id:1334,name:'mypad',price:4400}, 
{id:8234,name:'zpad',price:8400} 
]; 
}) 
.controller('myController',function($scope,data){ 
$scope.data=data; 
$scope.change=function(order){ 
//$scope.orderType=''; 
$scope.order=order; 
if($scope.orderType==''){ 
$scope.orderType='-'; 
}else{ 
$scope.orderType=''; 
} 
} 
}) 
</script> 
<style> 
.red{color: red;} 
</style> 
</head> 
<body ng-app=myApp> 
<p ng-controller=myController class=container> 
<nav class=navbar navbar-default> 
 <p class=container-fluid> 
 <p class=collapse navbar-collapse id=bs-example-navbar-collapse-1> 
  <form class=navbar-form navbar-left> 
  <p class=form-group> 
   <input type=text class=form-control ng-model=search placeholder=Search> 
  </p> 
  </form> 
 </p><!-- /.navbar-collapse --> 
 </p><!-- /.container-fluid --> 
</nav> 
<table class=table table-bordered table-hover> 
<thead> 
<tr> 
<th ng-click=change('id') ng-class={dropup:orderType==''}>id<span ng-class={red:order=='id'} class=caret></span></th> 
<th ng-click=change('name') ng-class={dropup:orderType==''}>name<span ng-class={red:order=='name'} class=caret></span></th> 
<th ng-click=change('price') ng-class={dropup:orderType==''}>price<span ng-class={red:order=='price'} class=caret></span></th> 
 
</tr> 
</thead> 
<tbody> 
<tr ng-repeat=x in data | filter:search | orderBy:orderType+order > 
<td>{{x.id}}</td> 
<td>{{x.name}}</td> 
 
<td>{{x.price}}</td> 
 
</tr> 
</tbody> 
</table> 
</p> 
</body> 
</html>

相关推荐：

详解Angularjs过滤器实现动态搜索与排序功能

AngularJS过滤器filter用法实例分析

详解AngularJS过滤器的使用_AngularJS

angularjs – angular.js过滤器的反极性

angularjs – angular.js过滤器的反极性

给定一个过滤器方法，如果满足一些条件则返回true，可以在HTML中调用它的相反方法。使用： 
"item in items | filter:!AllDay"

代替

"item in items | filter:AllDay"

？或者你必须维护两个单独的过滤器方法(一个为false和一个为true)？

如 ENDOH所示(这个问题在技术上是重复的)，你可以通过前置’！’来否定过滤器。到过滤器字符串，像这样： 
filter:'!'+myFilter

注意，’！引用。 documentation对此不是很清楚，一个例子会有所帮助。

angularjs – 如何调用具有多个参数的Angular.js过滤器？

angularjs – 如何调用具有多个参数的Angular.js过滤器？

从 documentation，我们可以调用像 date这样的过滤器： 
{{ myDateInScope | date: 'yyyy-MM-dd' }}

这里的日期是一个过滤器，它接受一个参数。

使用来自模板和JavaScript代码的更多参数调用过滤器的语法是什么？

在模板中，可以按冒号分隔过滤器参数。 
{{ yourExpression | yourFilter: arg1:arg2:... }}

从Javascript，你称它为

$filter('yourFilter')(yourExpression,arg1,arg2,...)

实际上有一个例子隐藏在orderBy过滤器docs。

例：

假设您创建了一个可以用正则表达式替换的过滤器：

myApp.filter("regexReplace",function() { // register new filter

  return function(input,searchRegex,replaceRegex) { // filter arguments

    return input.replace(RegExp(searchRegex),replaceRegex); // implementation

  };
});

在模板中调用以检出所有数字：

<p>{{ myText | regexReplace: '[0-9]':'X' }}</p>

Angularjs使用过滤器完成排序功能

Angularjs使用过滤器完成排序功能

本文实例为大家分享了Angularjs过滤器完成排序的具体代码，供大家参考，具体内容如下

rush:xhtml;"> <Meta charset="UTF-8">

AngularJS学习笔记之表单验证功能实例详解

AngularJS学习笔记之表单验证功能实例详解

本文实例讲述了AngularJS学习笔记之表单验证功能。分享给大家供大家参考，具体如下：

一、执行基本的表单验证

<!DOCTYPE html>
<html ng-app=''exampleApp''>
  <head>
    <meta charset="UTF-8">
    <title>表单</title>
    <script src="../../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap-theme.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
    <script type="text/javascript">
      angular.module(''exampleApp'',[])
      .controller(''defaultCtrl'',function($scope){
        $scope.addUser=function(userDetails){
          $scope.message=userDetails.name+"("+userDetails.email+")("+userDetails.agreed+")"
        }
        $scope.message=''Ready'';
      });
    </script>
  </head>
  <body>
    <div id="todoPanel"ng-controller=''defaultCtrl''>
      <form name=''myForm'' novalidate ng-submit=''addUser(newUser)''>
        <div>
          <div>
            <label for="">Name:</label>
            <input type="text" name=''userName''required ng-model=''newUser.name''/>
          </div>
          <div>
            <label for="">Email:</label>
            <input type="email" name=''userEmail''required ng-model=''newUser.email''/>
          </div>
          <div>
            <label for="">
              <input type="checkbox" ng-model=''newUser.agreed'' required />
              I agree to the terms and conditions
            </label>
          </div>
          <button type="submit"ng-disabled=''myForm.$invalid''>OK</button>
        </div>
        <div>
          message:{{message}}
          <div>
            valid:{{myForm.$valid}}
          </div>
        </div>
      </form>
    </div>
  </body>
</html>

在上述例子中，该HTML文档被浏览器加载时的初始状态是：有三个input元素以及一个被禁用且无法单击的ok按钮，当在文本框中输入值并且勾选了复选框之后，按钮将变为可用，从而允许用户提交表单。

1、增加表单元素

（1）首先需要在form上设置一个name属性
（2）需要给表单增添novalidate属性，该属性用于告诉浏览器不要自己校验表单，从而允许AngularJS不受干扰的工作
（3）ng-submit指令为表单提交事件指定一个自定义的响应行为，将在用户提交表单时触发

2、使用校验属性

（1）为各个想要验证的元素添加name属性，这样可以访问到Angularjs所提供的各种特殊的变量
（2）设置type属性，这个属性指定了input元素将要接收的数据类型，这些类型告诉angularjs需要什么样的校验
（3）指定required属性，这个属性指定用户必须为待校验的表单提供一个输入值
（4）在本例中input元素都使用ng-model指令来设置隐式定义的newUser对象的一个属性

3、监控表单的有效性

AngularJS中用来替换标准表单元素的指令定义了一些特殊的变量，可以用来检查表单中各个元素或整个表单的有效性状态。

$pristine：如果用户没有与元素/表单产生交互，则返回true
$dirty：如果用户与元素/表单产生过交互，则返回true
$valid：当元素/表单内容的校验结果为有效时则返回true
$invalid：当元素/表单内容的校验结果为无效时则返回true
$error：提供校验错误的详情信息

二、提供表单校验反馈信息

在上面的例子中展示的效果是比较简单的，ok按钮将一直被禁用，直到所有的input元素可用，以阻止用户输入错误格式的或未填完的数据。在接下来我们将演示AngularJS为报告实时的校验信息

1、使用css提供校验反馈信息

ng-pristine：用户未曾交互过的元素被添加到这个类
ng-dirty：用户曾经交互过的元素被添加到这个类
ng-valid：校验结果为有效的元素在这个类中
ng-invalid：校验结果为无效的元素在这个类中

下面我们来看具体用法：

<!DOCTYPE html>
<html ng-app=''exampleApp''>
  <head>
    <meta charset="UTF-8">
    <title>表单</title>
    <script src="../../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap-theme.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
    <script type="text/javascript">
      angular.module(''exampleApp'',[])
      .controller(''defaultCtrl'',function($scope){
        $scope.addUser=function(userDetails){
          $scope.message=userDetails.name+"("+userDetails.email+")("+userDetails.agreed+")"
        }
        $scope.message=''Ready'';
      });
    </script>
    <style type="text/css">
      form .ng-invalid.ng-dirty{background-color: lightpink;}
      form .ng-valid.ng-dirty{background-color: lightgreen;}
      span.summary.ng-invalid{color: red;font-weight: bold;}
      span.summary.ng-valid{color: green;}
    </style>
  </head>
  <body>
    <div id="todoPanel"ng-controller=''defaultCtrl''>
      <form name=''myForm'' novalidate ng-submit=''addUser(newUser)''>
        <div>
          <div>
            <label for="">Name:</label>
            <input type="text" name=''userName''required ng-model=''newUser.name''/>
          </div>
          <div>
            <label for="">Email:</label>
            <input type="email" name=''userEmail''required ng-model=''newUser.email''/>
          </div>
          <div>
            <label for="">
              <input type="checkbox" ng-model=''newUser.agreed'' required />
              I agree to the terms and conditions
            </label>
          </div>
          <button type="submit"ng-disabled=''myForm.$invalid''>OK</button>
        </div>
        <div>
          message:{{message}}
          <div>
            valid:
            <spanng->
              {{myForm.$valid}}
            </span>
          </div>
        </div>
      </form>
    </div>
  </body>
</html>

在上述例子中，我们定义了四个样式，头两个样式用于选择属于ng-dirty类成员的元素，仅在用户与之交互后应用到相应元素上。内容有效的元素是ng-valid类的成员，会被渲染为淡绿色背景，内容无效的元素是ng-invalid类的成员，会被渲染为淡粉色背景

2、使用特殊变量来提供反馈信息

<!DOCTYPE html>
<html ng-app=''exampleApp''>
  <head>
    <meta charset="UTF-8">
    <title>表单</title>
    <script src="../../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap-theme.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
    <script type="text/javascript">
      angular.module(''exampleApp'',[])
      .controller(''defaultCtrl'',function($scope){
        $scope.addUser=function(userDetails){
          $scope.message=userDetails.name+"("+userDetails.email+")("+userDetails.agreed+")"
        }
        $scope.message=''Ready'';
      });
    </script>
    <style type="text/css">
      form .ng-invalid-required.ng-dirty{background-color: lightpink;}
      form .ng-invalid-email.ng-dirty{background-color: lightgoldenrodyellow;}
      form .ng-valid.ng-dirty{background-color: lightgreen;}
      span.summary.ng-invalid{color: red;font-weight: bold;}
      span.summary.ng-valid{color: green;}
      div.error{color:red;font-weight: bold;}
    </style>
  </head>
  <body>
    <div id="todoPanel"ng-controller=''defaultCtrl''>
      <form name=''myForm'' novalidate ng-submit=''addUser(newUser)''>
        <div>
          <div>
            <label for="">Email:</label>
            <input type="email" name=''userEmail''required ng-model=''newUser.email''/>
            <divng-show="myForm.userEmail.$invalid&&myForm.userEmail.$dirty">
              <span ng-show="myForm.userEmail.$error.email">
                please enter a valid email address
              </span>
              <span ng-show="myForm.userEmail.$error.required">
                please enter a value
              </span>
            </div>
          </div>
          <button type="submit"ng-disabled=''myForm.$invalid''>OK</button>
        </div>
      </form>
    </div>
  </body>
</html>

在本例中新增了一个新的div元素用于给用户显示校验提示信息，新的div元素的可见性是受ng-show指令控制的，将会在input元素被输入值，且输入值未通过校验时显示该元素。这里是联合使用form元素的name值和input的name值来访问input元素的。在这个例子中，我们使用特殊校验变量和其他指令联合使用以增强用户体验。但是这样可能会使页面增加大量的相同冗余信息的元素，接下来我们做简化

<!DOCTYPE html>
<html ng-app=''exampleApp''>
  <head>
    <meta charset="UTF-8">
    <title>表单</title>
    <script src="../../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap-theme.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
    <script type="text/javascript">
      angular.module(''exampleApp'',[])
      .controller(''defaultCtrl'',function($scope){
        $scope.addUser=function(userDetails){
          $scope.message=userDetails.name+"("+userDetails.email+")("+userDetails.agreed+")"
        }
        $scope.message=''Ready'';
        $scope.getError=function(error){
          if(angular.isDefined(error)){
            if(error.required){
              return ''please enter a value'';
            }else if(error.email){
              return ''please enter a valid email address'';
            }
          }
        }
      });
    </script>
    <style type="text/css">
      form .ng-invalid-required.ng-dirty{background-color: lightpink;}
      form .ng-invalid-email.ng-dirty{background-color: lightgoldenrodyellow;}
      form .ng-valid.ng-dirty{background-color: lightgreen;}
      span.summary.ng-invalid{color: red;font-weight: bold;}
      span.summary.ng-valid{color: green;}
      div.error{color:red;font-weight: bold;}
    </style>
  </head>
  <body>
    <div id="todoPanel"ng-controller=''defaultCtrl''>
      <form name=''myForm'' novalidate ng-submit=''addUser(newUser)''>
        <div>
          <div>
            <label for="">Email:</label>
            <input type="email" name=''userEmail''required ng-model=''newUser.email''/>
            <divng-show="myForm.userEmail.$invalid&&myForm.userEmail.$dirty">
              {{getError(myForm.userEmail.$error)}}
            </div>
          </div>
          <button type="submit"ng-disabled=''myForm.$invalid''>OK</button>
        </div>
      </form>
    </div>
  </body>
</html>

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

您可能感兴趣的文章:
  • AngularJS实现表单验证
  • AngularJS使用ngMessages进行表单验证
  • AngularJS中实现用户访问的身份认证和表单验证功能
  • AngularJS使用angular-formly进行表单验证
  • AngularJS手动表单验证
  • AngularJS自动表单验证
  • 基于angularJS的表单验证指令介绍
  • AngularJS实现表单验证功能
  • AngularJS表单验证功能分析
  • 基于AngularJS实现表单验证功能
  • AngularJS实现的获取焦点及失去焦点时的表单验证功能示例

今天关于Angularjs过滤器完成排序功能实例详解和angularjs 过滤器的介绍到此结束，谢谢您的阅读，有关angularjs – angular.js过滤器的反极性、angularjs – 如何调用具有多个参数的Angular.js过滤器？、Angularjs使用过滤器完成排序功能、AngularJS学习笔记之表单验证功能实例详解等更多相关知识的信息可以在本站进行查询。

本文标签：

上一篇JS实现网页手机音乐播放器歌词同步播放功能代码（js音乐播放器显示歌词）

下一篇JS模拟锚点跳转的代码（js模拟锚点跳转的代码是什么）

相关文章