Как сохранить совпадающую строку поверх других строк в таблице с помощью угловых символов?

Я использую смарт-таблицу, я хочу, чтобы строки соответствовали другим строкам таблицы, используя 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="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;" 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>

Ответ 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/

Ответ 2

Вы можете рассматривать std как список и сортировать его с учетом сходства. Например, вы можете сделать следующее:

// 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);
}

И затем в html вы можете сделать следующее:

<tbody>
         <tr ng-repeat="std in students" ng-style="set_color(std)">
               <td ng-repeat="x in ordered()">{{x}}</td>
         </tr>
</tbody>

Я больше знаком с angular 2, 4 и 5, так что забудьте меня, если вызов функции внутри ng-repeat не разрешен. Другим решением было бы сохранить этот список как переменную.

Надеюсь, что это поможет.

Ответ 3

Вы можете сделать это следующим образом:

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>[email protected]</td>
  </tr>
  <tr ng-repeat="std in students" ng-style="set_color(std)">
    <td>B</td>
    <td>[email protected]</td>
  </tr>

  <tr ng-repeat="std in students" ng-style="set_color(std)">
    <td>C</td>
    <td>[email protected]</td>
  </tr>
</table>