javascript - 디렉티브 - 앵귤러js 예제




angularjs를 사용하여 테이블의 다른 행 위에 일치 된 행을 유지하는 방법은 무엇입니까? (2)

나는 스마트 테이블을 사용하고 있는데, 테이블에있는 다른 행의 맨 위에 일치하는 행을 유지하고 싶다. 내 경우에는 일치하는 문자열을 기반으로 테이블 행의 문자열과 일치했다. 행의 배경색이 바뀌고있다. ,하지만 다른 행 상단에 해당 색의 행을 표시하여 일치하는 행을 즉시 볼 수 있도록하고 싶습니다.

그것은 아래처럼 정렬하면 작동하지만 현재 페이지에만 영향을 미칩니다. 모든 매치 된 행을 페이지 매김과 관계없이 다른 행의 맨 위에 표시하고자합니다.

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


다음과 같이 할 수 있습니다.

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>

온라인 데모 (jsFiddle)







asp.net