如何使用 Angularjs 创建自定义过滤器

How to create customFilter using Angularjs?

本文关键字：自定义 过滤器 创建 Angularjs 何使用      更新时间：2023-09-26

在我的"AngularJS"应用程序中，我使用$first过滤了记录列表，并在angularjs中使用$last。但是无法过滤 ng-repeat 指令内的第一个元素$first行和 ng-repeat 指令内最后一个元素$last行。

如何做到这一点，就像.ng-if="$first一些过滤条件"。

我在这里创建了一个 plnkr。

<!DOCTYPE html>
<meta name="robots" content="noindex">
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
  
<meta name="description" content="[groupBy example]"/>
  <meta charset="utf-8">
  <title>Groupby</title>
  <style>
  #ul li{list-style:none;}
  #ul li ul li{ padding: 5px 0px;float:left;width: 100px;}
  .clear{clear:both;float:none}
  .list{font-size:12px;color:gray;padding:5px;border:1px solid #ddd;width: 150px;}
  
  first1 ul li{display:none}
  last1 ul li{display:none}
 .first1 ul li:first-child{background: orange;display:block}
 .last1 ul li:last-child{background: orange;display:block}
  </style>
</head>
<body>
<div ng-controller="MainController">   
		<div ng-repeat="(key, value) in batchs | groupBy: 'classId'" >
		<b>{{ key }}</b><br />
		.......
		<!--Filtered row -->
		<ul id="ul">
		<li>
		<ul>
		<li>Start Time</li><li>End Time</li>       
		</ul>
		</li>
		<p class="clear"></p>
		<li ng-repeat="batch in value"  ng-class="{'first1': $first, 'last1': $last}" ng-if="$first || $last">
		<ul>
		<li>{{ batch.inTime }}</li><li>{{ batch.outTime }}</li>       
		</ul>
		<div class="clear"></div>
		</li>
		</ul>
		<!--/Filtered row -->
		<!--Complete row -->
		<ul id="ul" class="list">
		list of data
		<li ng-repeat="batch in value" >
		<ul>
		<li>{{ batch.inTime }}-{{ batch.outTime }}-{{ batch.teacher }}</li>        
		</ul>
		<div class="clear"></div>
		</li>
		</ul>
		<!--/Complete row -->
		.......
		</div>
</div>
<script id="jsbin-javascript">
var app=angular.module('app',['angular.filter']);
  app.controller('MainController', function($scope) { 
  $scope.batchs = [
    {Id:1, classId:'BCA',  inTime:10.00, outTime:11.00,teacher:'Alex'},
    
    {Id:4, classId:'MCA',  inTime:10.00, outTime:11.00,teacher:'Andrew'},
    {Id:5, classId:'MCA',  inTime:11.00, outTime:12.00,teacher:'Andrew'},
    
    {Id:6, classId:'M.Com',inTime:10.00, outTime:11.00,teacher:'William'},
    {Id:7, classId:'M.Com',inTime:11.00, outTime:13.00,teacher:'William'},
    {Id:8, classId:'M.Com',inTime:14.00, outTime:16.00,teacher:'William'}
  ];
 });
</script>
</body>
</html>

请参阅plnkr或运行代码片段，我只想显示橙色背景时间，例如第一个元素开始时间和结束时间的最后一个元素。

当然，我已经通过使用css来做到这一点。 但我想通过angularjs来做到这一点。

我该怎么做，任何建议或帮助 感谢。

嗨，您可以创建自定义过滤器。

 angular.module('myCustomFilters', []).filter('checkmark', function() {
      return function(input) {
        return input ? true :false ;
      };
    });

现在，您创建了一个名为复选标记的筛选器，输入的计算结果为真或假，我们返回真或假。

现在我们的筛选器已准备就绪，我们需要将 myCustomFilters 模块注册为主应用模块的依赖项。比如说，在app/js/app.js中：

例

angular.module('myApp', ['ngRoute','myAppControllers','myCustomFilters']);

由于过滤器位于一个 septate js 文件中，比如说，js/filters.js ，我们需要将这个文件包含在我们的布局模板中。

 <script src="js/controllers.js"></script>
 <script src="js/filters.js"></script>

现在，您可以在任何地方使用此过滤器作为

<div>{{UserStatus | checkmark}}</div>

希望这会有所帮助。

相关文章：