Question

我使用智能表我希望使用angularjs（1）在表中的其他行之上保持匹配的行，在我的情况下，我已根据匹配的字符串I＆＃匹配表列中的字符串39; m更改行背景颜色，但我想在其他行的顶部显示这些彩色行，以便我能够立即看到匹配的行。

如果我像下面那样排序，但它只影响当前页面，我希望将所有匹配的行显示在其他行的顶部，而不管分页和所有。

<tr ng-repeat="emp in employees | orderBy:set_color" ng-style="set_color(emp)">

我怎么能做到这一点。如果您想了解更多信息，请查看此链接

＆＃13;

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;

谢谢

Answer 1

使用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/

Answer 2

您可以将$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中调用函数，请忘记我。其他解决方案是将该列表存储为变量。

希望它有所帮助。

Answer 3

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>

Online demo(jsFiddle)

如何使用angularjs将匹配的行保存在表中的其他行之上？

3 个答案: