angularjs过滤器实例

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
 <meta charset="UTF-8" />
 <title>Document</title>
</head>
<body>
 <div ng-controller="studentController">
  <div>
     显示条数: <input type="text" ng-model="num" /><br />
     名称:<input type="text" ng-model="username" /><br />
     任何查询 : <input type="text" ng-model="anySearch" />
    工资之上:<input type="text" ng-model="money" />
  </div>
  
  <div ng-repeat="item in studentlist | limitTo:num|orderBy:'-id' |filter:{'name':username} |filter:anySearch |filter:{'salary':money}:compareMoney">
   id:{{ item.id }} 名称:{{item.name}}  工资:{{item.salary}} 日期:{{item.birthday}}
  </div>
 </div>
<script src="js/angular.min.js"></script> 
<script type="text/javascript">
  var myApp = angular.module("myApp",[]);
  myApp.controller("studentController",function($scope,studentFactory){
   $scope.num=4;
   studentFactory.getStudentList($scope);
   $scope.compareMoney=function(a,b){
    return a>=b;
   }
  })
  
  myApp.factory("studentFactory",function($http){
   var factory={};
   factory.getStudentList=function(obj){
    $http.get("/student").then(function(data){
     obj.studentlist = data.data;
     console.log(data.data);
    }).catch(function(){
     console.log("error");
    });
   }
   return factory;
  })
  
</script>
</body>
</html>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 12,385评论 2 17
  • Angular面试题 一、ng-show/ng-hide与ng-if的区别? 第一点区别是,ng-if在后面表达式...
    w_zhuan阅读 10,893评论 0 26
  • 通过AngularJS仿豆瓣一刻的案例:https://github.com/zhongxiaolian/doub...
    中小恋阅读 5,758评论 1 21
  • 1、angularjs的几大特性是什么? 双向数据绑定、依赖注入、模板、指令、MVC/MVVM 2、列举几种常见的...
    2e9a10d418ab阅读 5,195评论 0 10
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 6,416评论 1 10