Quiero resaltar la fila de una tabla si esta tabla contiene un elemento que está en una variable global.

Aquí hay un violín: http://jsfiddle.net/L60L3gv9/

Así que

var myVar = "SWITZERLAND" 

Es la variable global que estoy buscando en la tabla.

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

Y si la tabla lo contiene, quiero resaltar la fila.

¿Algún consejo?

0
DeseaseSparta 11 dic. 2015 a las 13:06

3 respuestas

La mejor respuesta

Aquí hay una posible solución:

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

Tenga en cuenta que el servidor devuelve países en minúsculas.

Aquí hay una jsfiddle

1
Jax 11 dic. 2015 a las 10:34

Primero, defina una clase que resalte la fila:

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

Luego debe definir una constante e inyectarla en el controlador:

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

Por último, use la directiva ng-class en la vista:

<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>
0
tommy 11 dic. 2015 a las 10:29
                   <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>

Entiendo claramente su pregunta, si alguna fila tiene algún dato secundario o las filas necesitan resaltar la imagen o alguna. Aquí usé la imagen usando bootstrap Esto funciona perfectamente, verifique una vez

0
Rajagopal Reddy ip 28 feb. 2017 a las 09:23
34220834