Show or hide div with Angularjs and ng-repeat

Question

Show or hide div with Angularjs and ng-repeat

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

1

I have an array of students which I present their names in a list and under each name two buttons that allow assigning them a positive or negative rating.

What I want to do is to click on the button (positive or negative) to show a message and hide the div buttons

then I share what I have:

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, the message will automatically appear under the name of the student selected. I hope you made me understand. Thank you in advance

angularjs angular-directivas

asked by Dimoreno 24.10.2016 в 05:39

source

3 answers

1

Put a Boolean variable in the scope of your controller. Put ng-show or ng-hide matching your variable on the DOM element that you want to hide, and change the value of your Boolean on the switch.

answered by 24.10.2016 в 11:08

0

I do not know Angularjs or ng-repeat, but if you can load the page with your data according to this model, it has to 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.

answered by 24.10.2016 в 09:49

Is there a library for Voice recognition in Java? [closed] Remove from the diff on github sensitive data

score 1 · Accepted Answer

I could already 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;
      }     
    }
}