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

使用 Angularjs 和 ng-repeat 显示或隐藏 div

  • 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. 在控制器的范围内放置一个布尔变量。在要隐藏的 DOM 元素上设置ng-show或等于变量，并在开关上更改布尔值。ng-hide

    • 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