Question

如果此表包含一个全局变量中的元素，我想突出显示表的行。

所以

var myVar = "SWITZERLAND"

是我在桌子上看的全局变量。

<table>
  <th>Column1</th>
  <th>Column2</th>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country | uppercase }}</td>
  </tr>
</table>

如果表中包含它，我想突出显示该行。

有任何建议吗？

Answer 1

这是一个可能的解决方案：

HTML：

<div ng-app="myApp" ng-controller="customersCtrl"> 

<table>
  <th>Column1</th>
  <th>Column2</th> {{myVar}}
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td ng-class="{ 'red-background' : x.Country==myVar }">{{ x.Country | uppercase }}</td>
  </tr>
</table>

CSS：

.red-background {
   background-color: red;
 }

JS：

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $scope.myVar = "Switzerland"
  $http.get("http://www.w3schools.com/angular/customers.php")

  .then(function (response) {
    $scope.names = response.data.records;
  });    
});

请注意，服务器以小写字母返回国家/地区。

这是jsfiddle

Answer 2

首先，定义一个突出显示行的类：

tr.highlight {
  background-color:#123456;
}

然后你应该定义一个常量并将其注入控制器：

var myVar = "SWITZERLAND" // highlight the row where SWITZERLAND is

var app = angular.module('myApp', []);

app
    .constant('myVar', myVar)
    .controller('customersCtrl', function($filter, $scope, $http, myVar) {
        $scope.myVar = myVar;
        $http.get("http://www.w3schools.com/angular/customers.php")
            .then(function(response) {
                $scope.names = response.data.records.map(function(item) {
                    item.Country = $filter('uppercase')(item.Country);
                    return item;
                });
            });
    });

最后，在视图中使用指令ng-class：

<div ng-app="myApp" ng-controller="customersCtrl">
    <table>
        <th>Column1</th>
        <th>Column2</th>
        <tr ng-repeat="x in names" ng-class="{'highlight' : x.Country === myVar}">
            <td>{{ x.Name }}</td>
            <td>{{ x.Country }}</td>
        </tr>
    </table>
</div>

Answer 3

                   <tr>
                    <th>Sr. No.</th>
                    <th>Menu Name</th>
                    <th>Child Menu</th>
                  </tr>

               <tr ng-repeat="menus in menuList" >
                <td >{{$index+1}}</td>
                <td >{{menus.menu}}</td>
               <td ng-if="menus.menu_items"><span class="text-left logo-dashboard">
                  <a ui-sref="configureChildMenuState" title="Cilk me"><span class="glyphicon glyphicon-option-horizontal"></span></a>
               </td>
               <td ng-if="!menus.menu_items"></td>

            </tr>
            </tbody>

我清楚地了解你的问题，如果任何行有任何子数据或行需要突出显示图像或任何一行。在这里我通过使用boostrap使用图像这是完美的检查一次

如果一行包含Angularjs的特定项，则突出显示该行

3 个答案: