在我的'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
来做到这一点。
我怎么能这样做,任何建议或帮助赞赏。
答案 0 :(得分:0)
嗨,您可以创建自定义过滤器。
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>
希望这会有所帮助。