我使用智能表我希望使用angularjs(1)在表中的其他行之上保持匹配的行,在我的情况下,我已根据匹配的字符串I&#匹配表列中的字符串39; m更改行背景颜色,但我想在其他行的顶部显示这些彩色行,以便我能够立即看到匹配的行。
如果我像下面那样排序,但它只影响当前页面,我希望将所有匹配的行显示在其他行的顶部,而不管分页和所有。
<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' }
}
}
}
})
&#13;
<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>
&#13;
谢谢
答案 0 :(得分:8)
使用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;
}
见工作小提琴:
答案 1 :(得分:4)
您可以将$section.removeClass('active');
$section.eq(jQuery($box).filter('.active[clicked]').index()).addClass("active");
视为列表,并根据相似性对其进行排序。例如,您可以执行以下操作:
std
然后在html中你可以做到以下几点:
// This function will return a list with the matching elements first,
// and the non matching after.
$ordered = function(findme) {
var values = Object.values(std);
var matching = values.filter(e => e === findme);
var notMatching = values.filter(e => e !== findme);
return matching.concat(notMatching);
}
我更熟悉角度2,4和5,所以如果不允许在ng-repeat中调用函数,请忘记我。其他解决方案是将该列表存储为变量。
希望它有所帮助。
答案 2 :(得分:4)
You can do it like this:
HTML
// I used `B` as `std.Name` for example in my code:
function matchRowByName() {
$.each($('tr[ng-repeat="std in students"'), function() {
if ($(this).find('td').first().text() === "B") {
$('table').prepend($(this));
$(this).addClass('matched');
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr ng-repeat="std in students" ng-style="set_color(std)">
<td>A</td>
<td>a@test.com</td>
</tr>
<tr ng-repeat="std in students" ng-style="set_color(std)">
<td>B</td>
<td>b@test.com</td>
</tr>
<tr ng-repeat="std in students" ng-style="set_color(std)">
<td>C</td>
<td>c@test.com</td>
</tr>
</table>