Home / Questions / 29470
Accepted
Dimoreno
Asked: 2020-10-24 19:39:09 +0800 CST 2020-10-24 19:39:09 +0800 CST

Show or hide div with Angularjs and ng-repeat

  • 772

I have an array of students which I present their names in a list and below each name two buttons that allow them to be assigned a grade, either positive or negative.

What I want to do is that when I click on the button (positive or negative) it shows a message and hides the buttons div

I share what I have below:

HTML view

<ul class="ejemplo" ng-app ng-controller="sample">
    <div ng-repeat="i in estudiantes">
      <h5>{{i.nombres}}</h5>
      <div class="botones">
        <input type="button" data-ng-click=calificar($event,i.id) value="calificacion positiva" id="1"/>
        <input type="button" data-ng-click=calificar($event,i.id) value="calificacion negativa" id="2"/>
      </div>      
    </div>
</ul>

controller.js

function sample ($scope) {

    $scope.estudiantes = [
        {
            nombres: 'Diego Israel',
            id: 2
        },
        {
            nombres: 'Juan Carlos',
            id: 3
        },
        {
            nombres: 'Pedro',
            id: 4
        }
    ];

    $scope.calificar = function(event,id){
    var estado = event.target.id;
      switch (estado) {
        case '1':
          //para no mostrar este alert quiero ocultar el div botones y mostrar el respectivo mensaje
            alert('calificacion positiva');
        break;
        case '2':
          //para no mostrar este alert quiero ocultar el div botones y mostrar el respectivo mensaje
            alert('calificacion negativa');
        break;
        default:
        return false;
      }     
    }
}

The idea is that once the button has been clicked, automatically below the name of the selected student the message I hope I have made myself understood is displayed. I thank you in advance

angularjs

3 Answers

  1. Put a boolean variable in the scope of your controller. Set ng-showor ng-hideequal to your variable on the DOM element you want to hide, and change the value of your boolean on the switch.

    • 1
  2. Best Answer

    I was able to solve it, I share the answer:

    <ul class="ejemplo" ng-app ng-controller="sample">
    <div ng-repeat="i in estudiantes">
      <h5>{{i.nombres}}</h5>
      <div class="botones" ng-show='i.estado==0'>
        <input type="button" data-ng-click=calificar($event,i.id) value="calificacion positiva" id="1"/>
        <input type="button" data-ng-click=calificar($event,i.id) value="calificacion negativa" id="2"/>
      </div>
      <h6 ng-show='i.estado == 1'>calificacion asignada</h6>
    </div>
</ul>


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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function sample ($scope) {

    $scope.estudiantes = [
        {
            nombres: 'Diego Israel',
            id: 2,
            estado: 0
        },
        {
            nombres: 'Juan Carlos',
            id: 3,
            estado: 0
        },
        {
            nombres: 'Pedro',
            id: 4,
            estado: 0
        }
    ];


    $scope.calificar = function(event,id){
    var estado = event.target.id;
      switch (estado) {
        case '1':
          //para no mostrar este alert quiero ocultar el div botones y mostrar el respectivo mensaje

            for(var i=0; i< $scope.estudiantes.length;i++){
            if($scope.estudiantes[i].id == id){
                alert('calificacion positiva'+id);
              $scope.estudiantes[i].estado = 1;
              break;
            }
            }

        break;
        case '2':
          //para no mostrar este alert quiero ocultar el div botones y mostrar el respectivo mensaje
            alert('calificacion negativa');
        break;
        default:
        return false;
      }     
    }
}
    • 1

  3. I don't know Angularjs or ng-repeat, but if you can load the page with your data according to this model, it should work as you say:

    <html>
<script>
	function calificar(idAlumno, idCalificacion){
		var alumnoEle = document.getElementById(idAlumno);
		var botonesEle = document.getElementById("botones" + idAlumno);
		alumnoEle.removeChild(botonesEle);

		var lbCali = document.createElement("label");
		if(idCalificacion == 1)
			lbCali.innerHTML = "calificacion positiva";
		if(idCalificacion == 2)
			lbCali.innerHTML = "calificacion negativa";

		alumnoEle.appendChild(lbCali);

	}
</script>
<body>
<ul class="ejemplo">
    <div id="2">
	<h5>Diego Israel</h5>
      <div class="botones" id="botones2">
        <input type="button" onclick="calificar(2,1)" value="calificacion positiva"/>
        <input type="button" onclick="calificar(2,2)" value="calificacion negativa"/>
      </div>      
    </div>
    <div id="3">
	<h5>Juan Carlos</h5>
      <div class="botones" id="botones3">
        <input type="button" onclick="calificar(3,1)" value="calificacion positiva"/>
        <input type="button" onclick="calificar(3,2)" value="calificacion negativa"/>
      </div>      
    </div>
</ul>
</body>
</html>

    If you need any clarification, you know where I am.

    • 0