¿Cómo ocultar o mostrar un registro de una repetición ng dentro de una tabla basada en un clic ng?

La forma de ocultar o mostrar un registro en particular en una tabla es similar a la que se usa para ocultar o mostrar cualquier elemento del DOM. Lo básico y lo primero que me viene a la mente son las directivas ng-show y ng-hide que muestran u ocultan respectivamente en función de los resultados binarios de las expresiones vinculadas a ellas. Otra forma puede ser el uso de
ng-if que funciona como un bloque if en la programación general. Si la expresión es verdadera el elemento es visible o no.
El control de esto se puede hacer fácilmente con el comando ng-click que se puede usar para llamar a una función o ejecutar un código que manipula las entidades presentes en las expresiones booleanas.

Enfoque 1: aquí el elemento tr es visible solo si la expresión vinculada a ng-show es verdadera.
Aquí ng-hide está comentado en el ejemplo, pero funciona de la misma manera que ng-show. La diferencia es que oculta el elemento tr si la expresión booleana da un valor verdadero.
Las directivas ng-show y ng-hide pueden tener llamadas a funciones generales, pero deben devolver un valor booleano.

Sintaxis:

< tr ng-repeat="x in [some list]" ng-show="[some boolean expression]" > < tr >
< tr ng-repeat="x in [some list]" ng-hide="[some boolean expression]" > < tr >

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
      Angular show hide table element on click
  </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
    </script>
</head>
  
<body>
    <div ng-app="mainApp" ng-controller="MyCtrl">
        <button ng-click="showPresent()">
          Show People Present
      </button>
        <button ng-click="showAbsent()">
          Show People Absent
      </button>
        <table>
            <tr>
                <td>Name</td>
                <td>Age</td>
            </tr>
            <!-- The next two lines are interchangeable -->
            <!-- <tr ng-repeat="p in people" ng-hide="p.attended!=flag"></tr> -->
            <tr ng-repeat="p in people" ng-show="p.attended==flag">
                <td>{{p.name}}</td>
                <td>{{p.Age}}</td>
            </tr>
        </table>
    </div>
    <script>
        var app = angular.module("mainApp", []);
        app.controller("MyCtrl", function($scope) {
            $scope.flag = 1;
            $scope.people = [{
                name: "GeekAgashi",
                Age: 12,
                attended: 1
            }, {
                name: "GeekSatoshi",
                Age: 16,
                attended: 0
            }, {
                name: "GeekNakumato",
                Age: 14,
                attended: 1
            }];
            $scope.showPresent = function() {
                $scope.flag = 1;
            };
            $scope.showAbsent = function() {
                $scope.flag = 0;
            };
        });
    </script>
  
</body>
  
</html>

Producción:

  • Cuando se hace clic en «Mostrar personas presentes», el valor booleano es verdadero para todos los objetos cuyo valor atendido coincida con el valor del indicador, ya que cambia a 1 mediante una llamada desde ng-click:
  • Cuando se hace clic en «Mostrar personas ausentes», el valor booleano es verdadero para todos los objetos cuyo valor atendido coincida con el valor del indicador, ya que cambia a 0 mediante una llamada desde ng-click:

Enfoque 2: aquí usamos ngIf para mostrar u ocultar registros de la tabla. El código sigue siendo el mismo que el trabajo es casi el mismo. Pero ngIf es menos confiable que ng-show o ng-hide, pero lo que hace es que elimina completamente los elementos del DOM.

Sintaxis:

< tr ng-repeat="x in [some list]" ng-if="[some boolean expression]" > < tr >

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>Angular show or hide element on click</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
    </script>
</head>
  
<body>
    <div ng-app="mainApp" ng-controller="MyCtrl">
        <button ng-click="showPresent()">
          Show People Present
      </button>
        <button ng-click="showAbsent()">
          Show People Absent
      </button>
        <table>
            <tr>
                <td>Name</td>
                <td>Age</td>
            </tr>
            <!--The main change in the code is in the next line-->
            <tr ng-repeat="p in people"
                ng-if="p.attended==flag">
                <td>{{p.name}}</td>
                <td>{{p.Age}}</td>
            </tr>
        </table>
    </div>
    <script>
        var app = angular.module("mainApp", []);
        app.controller("MyCtrl", function($scope) {
            $scope.flag = 1;
            $scope.people = [{
                name: "GeekAgashi",
                Age: 12,
                attended: 1
            }, {
                name: "GeekSatoshi",
                Age: 16,
                attended: 0
            }, {
                name: "GeekNakumato",
                Age: 14,
                attended: 1
            }];
            $scope.showPresent = function() {
                $scope.flag = 1;
            };
            $scope.showAbsent = function() {
                $scope.flag = 0;
            };
        });
    </script>
  
</body>
  
</html>

Producción:

  • La salida sigue siendo la misma ya que ambos funcionan de la misma manera:

Publicación traducida automáticamente

Artículo escrito por anushil8991 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *