Question

在我的'AngularJS'应用程序中，我使用$first中的$last和angularjs过滤了记录列表。但是无法在ng-repeat指令中过滤 $ first first of first element 和ng-repeat指令中 $ last last of last element 。

如何执行此操作，例如。， ng-if =“$ first 某些过滤条件 ”。

我创建了一个plnkr here。

<!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或运行代码段，我只想显示橙色背景时间，例如第一个元素开始时间和结束时间的最后一个元素< / b>

当然，我使用css完成了这项工作。但我想通过angularjs来做到这一点。

我怎么能这样做，任何建议或帮助赞赏。

Answer 1

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

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

现在您创建了一个名为 checkmark 的过滤器，输入的结果为true或false，我们返回true或false。

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

例如

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

由于过滤器位于septate js文件中，Say， js / filters.js ，我们需要在布局模板中包含此文件。

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

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

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

希望这会有所帮助。

如何使用Angularjs创建customFilter？

1 个答案: