如何使用 angularjs 切换内联 div 元素？ ng-switch 或 ng-ht 或 ng-show？答案

【问题标题】：How do I switch inline div elements uing angularjs? ng-switch or ng-hde or ng-show?如何使用 angularjs 切换内联 div 元素？ ng-switch 或 ng-ht 或 ng-show？
【发布时间】：2016-07-24 17:46:03
【问题描述】：

我只需要根据某种类型的事件切换 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> `

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

“切换 div 方向”

我不确定你的意思。但是您应该知道您在谈论的每个事件是什么：

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

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

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

【讨论】：

好的，我要做的是在提交表单时切换 div 面板。最好在提交表单数据时的点击事件期间。每个部分代表一个新的表格或问题。因此，当用户完成注册的一部分时，将通过在顶部看到他们移动到注册的下一部分的图形表示来通知用户。因此，第 1 部分、第 2 部分、第 3 部分。
另外，为什么切换 div 很重要，因为我希望能够将所有 div 面板加载到 js 文件中，以便用户可以单击所有面板客户端，从而使应用程序更高效。我也希望使用 json 文件来捕获 MySQL 数据以便快速阅读。这个应用程序实际上有 6 个 spa，因为每个都相互独立，有些使用纵向模板，有些使用横向模板。因此我的工作越来越多，因为我最初认为我可以用 PHP 和 ajax 来做这件事，但 Angularjs 更合适。
嗯，是的。你也可以使用简单的 CSS 和 PHP 来做到这一点——如果你加载了数据，理论上你可以显示：none 你不想看到的项目。并用 javascript 处理事件以使其工作。但你是对的，角度更容易，并且可以分离关注点。我会在每个 div 上使用一个简单的 ng-hide 并为不同的状态设置变量。如果您在 js 中设置 $scope.divA = false ，则 html 上的 ng-show="divA" 将不会显示。
jsfiddle.net/deathhell/8Yz7S/4 这将向您展示更多 ng-hide 和 ng-show 的工作原理。你可以轻松地做你正在寻找的东西。每当您希望更改这些变量时，您的 ng-click 都会很有用。
您找到解决方案了吗？