PK-*_*825 12 html javascript asp.net jquery
我使用的是智能表我想用angularjs(1),在我的情况我已经从匹配表列字符串,保持对其他行的顶部匹配的行表中的字符串相匹配的基础上,我改变行背景颜色,但我想在其他行的顶部显示那些彩色的行,以便我能够立即看到匹配的行.
它是有效的,如果我排序如下,但它只影响当前页面,我希望显示所有匹配的行到其他行的顶部,无论分页和所有.
<tr ng-repeat="emp in employees | orderBy:set_color" ng-style="set_color(emp)">
我怎么能做到这一点.如果您想了解更多信息,请查看此链接
var myApp = angular.module('myApp', [])
.controller('employeeController', function ($scope) {
var employees = [{
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
}, {
"Name": "Berglunds snabbköp",
"City": "Luleå",
"Country": "Sweden"
}, {
"Name": "Blauer See Delikatessen",
"City": "Mannheim",
"Country": "Germany"
}, {
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
}, {
"Name": "Bólido Comidas preparadas",
"City": "Madrid",
"Country": "Spain"
}, {
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
}, {
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
}, {
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
}, {
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "Mexico"
}, {
"Name": "Chop-suey Chinese",
"City": "Bern",
"Country": "Switzerland"
}, {
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
}];
$scope.employees=employees;
$scope.set_color = function (emp) {
var inputString = emp.Country;
for (i = 0; i < inputString.length; i++) {
var findme = "France";
if (inputString.indexOf(findme) > -1) {
return { 'background-color': '#FFCCCB' }
}
}
}
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body ng-app="myApp">
<div ng-controller="employeeController">
<div class="container" style="margin-top:40px;">
<div class="row">
{{error}}
<div class="col-md-6">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="emp in employees" ng-style="set_color(emp)">
<td>{{emp.Name}}</td>
<td>{{emp.City}}</td>
<td>{{emp.Country}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>谢谢
使用AngularJS我相信我会选择这个选项:
HTML
orderBy可以采取多个过滤器
<tr ng-repeat="emp in employees | orderBy: [sort, 'Name']"
ng-class="{'matched': emp.matched }">
JS
var findme = "France";
$scope.sort = (emp) => {
emp.matched = emp.Country.indexOf(findme) > -1;
return !emp.matched;
}
看工作小提琴:
https://jsfiddle.net/kraaness/vft90229/