如何使用angularjs切换内联div元素? ng-switch或ng-hde还是ng-show?

时间:2016-07-24 17:46:03

标签: angularjs angularjs-directive

我只需根据某种类型的事件切换div方向。它可以是onclick,ng-switch,ng-show,ng-hide。请告诉我一个有效的。我不想使用ng-include。

   <body ng-app="mdoApp"ng-init="getValue='1'">
    <label>type a number(1 to 3):
    <input type="text" ng-model="getValue" />
    </label>
    <div class="div_contain1" ng-switch="getValue">
    <span ng-switch-when="1"ng-hide=""><div class="div_p2">PART 3</div>
    <div class="div_p2">  PART 2</div><div class="div_p1"> PART 1</div></span>
    <span ng-switch-when="2" ng-hide=""><div class="div_p2">PART 3</div>
    <div class="div_p1"> PART 2</div><div class="div_p1"> PART 1</div></span>
    <span ng-switch-when="3" ng-hide=""><div class="div_p1">PART 3</div>
    <div class="div_p1"> PART 2</div><div class="div_p1"> PART 1</div></span>
    <span ng-switch-default="1"><div class="div_p2">PART 3</div>
    <div class="div_p2"> PART 2</div><div class="div_p1"> PART 1</div></span>
    </div>

好的,我想要做的是在提交表单时切换div面板。优选地,在提交表单数据的点击事件期间。每个部分代表一个新的形式或问题。因此,用户在完成注册的一部分时将被告知,通过在顶部看到他们移动到注册的下一部分的图形表示。因此,第1部分,第2部分,第3部分。

好的,这是另一种操纵div图层的尝试:

`<!DOCTYPE HTML>
  <html>
   <head>

<title>Untitled 31</title>
     <script type="text/javascript" src="angular.min.js"></script>
       </head>
    <body>
   <div ng-app="showApp" ng-init="showDiv='1'">
  <div ng-controller="showView">
  <label>type a number(1 to 3):
  <input type="text" ng-controller ="showView" ng-model="showDiv" />
  </label>
   <div ng-show="divA">con1</div>
   <div ng-show="divB">con2</div>
   <div ng-show="divC">con3</div>
   </div></div><p></p> 
   <script>
   var app = angular.module('showApp', []);
   app.controller('showView', function(showDiv, $scope){
   return{
   If (showDiv === 1){
    $scope.divA = true;
    $scope.divB = false;
    $scope.divC = false;  
   }   
   If (showDiv === 2){
   $scope.divA = false;
   $scope.divB = true;
    $scope.divC = false;
  }   
  If (showDiv === 3){
   $scope.divA = false;
   $scope.divB = false;
   $scope.divC = true;
   }  
   }
   });
   </script>

   </body>
    </html> `

1 个答案:

答案 0 :(得分:0)

  

“切换div方向”

我不确定你的意思。但是你应该知道你正在谈论的每个事件:

的onclick https://docs.angularjs.org/api/ng/directive/ngClick

NG-开关 https://docs.angularjs.org/api/ng/directive/ngSwitch

NG-显示 https://docs.angularjs.org/api/ng/directive/ngShow

纳克隐藏 https://docs.angularjs.org/api/ng/directive/ngHide

一旦您更清楚地定义了您想要的方向,就可以更好地解决这个问题。例如,如果您希望在启用范围变量时显示div,则ng-show很容易使用。如果在执行单击时需要更多操作,则可以非常轻松地使用ng-click调用函数。如果你更多地定义你的目标,我可以做一个小提琴。