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

Показать или скрыть div с помощью Angularjs и ng-repeat

  • 772

У меня есть множество студентов, имена которых я представляю в виде списка, а под каждым именем две кнопки, которые позволяют им присваивать оценку, положительную или отрицательную.

Что я хочу сделать, так это то, что когда я нажимаю кнопку (положительную или отрицательную), она показывает сообщение и скрывает кнопки div

Я делюсь тем, что у меня есть ниже:

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>

контроллер.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;
      }     
    }
}

Идея состоит в том, что после нажатия кнопки под именем выбранного ученика автоматически отображается сообщение, надеюсь, я понял. Я благодарю вас заранее

angularjs

3 Answers

  1. Поместите логическую переменную в область действия вашего контроллера. Установите ng-showили ng-hideравняйтесь вашей переменной в элементе DOM, который вы хотите скрыть, и измените значение вашего логического значения на переключателе.

    • 1
  2. Best 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. Я не знаю Angularjs или ng-repeat, но если вы можете загрузить страницу со своими данными в соответствии с этой моделью, она должна работать, как вы говорите:

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

    Если вам нужны какие-то разъяснения, вы знаете, где я.

    • 0