如果一行包含使用 Angularjs 的特定项目，则突出显示该行答案

【问题标题】：Highlight a row if it contains a specific item with Angularjs如果一行包含使用 Angularjs 的特定项目，则突出显示该行
【发布时间】：2015-12-11 10:06:52
【问题描述】：

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

这是一个小提琴：http://jsfiddle.net/L60L3gv9/

所以

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>

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

有什么建议吗？

【问题讨论】：

试试这个：jsfiddle.net/L60L3gv9/1

标签： javascript angularjs

【解决方案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

【讨论】：

你可以让它不区分大小写吗？
是的，没关系
有没有办法将 css 直接放在 ng-class 属性中？ @Rayon Dabre
@DeseaseSparta stackoverflow.com/questions/21364445/…
感谢@Rayon Dabre 和 Jax：非常有帮助。你应该已经回答了人造丝：/

【解决方案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>

【讨论】：

'SWITZERLAND' === 'Switzerland' 我想会返回 false！
内部控制器 Country 使用 $filter 进行转换
哦......我的坏......任何其他避免控制器循环的方法将不胜感激！

【解决方案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 来使用图像这是一次完美的检查

【讨论】：