1

Tengo un array de estudiantes los cuales presento sus nombres en una lista y debajo de cada nombre dos botones que permiten asignarles una calificación ya sea positiva o negativa.

Lo que deseo hacer es que cuando de click en el botón (positivo o negativo) muestre un mensaje y oculte el div botones

a continuación comparto lo que tengo:

vista html

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

La idea es que una vez que se haya clickeado en el boton, automaticamente debajo del nombre del estudiante seleccionado se muestre el mensaje Espero me haya hecho entender. De antemano les agradezco

3 respuestas 3

1

Pon una variable booleana en el scope de tu controlador. Pon ng-show o ng-hide igualando a tu variable sobre el elemento del DOM que quieras ocultar, y cambia el valor de tu booleano en el switch.

1
  • Hola @Josué. ¡Bienvenido a Stack Overflow en español y gracias por contribuir! Quizás la respuesta podría estar más completa mostrando un pequeño fragmento de código de cómo quedaría. Esto sin duda podría ayudar más, no sólo al autor de la pregunta sino a futuros lectores.
    – Mariano
    Commented el 24 oct. 2016 a las 9:25
1

Ya lo pude resolver les comparto la respuesta:

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

No conozco Angularjs ni ng-repeat, pero si puedes cargar la página con tus datos conforme a este modelo te tiene que funcionar como dices:

<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>

Si necesitas cualquier aclaración ya sabes donde estoy.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.