这篇文章主要围绕AngularJS：ng-switch-whenwithaOR展开，旨在为您提供一份详细的参考资料。我们将全面介绍AngularJS：ng-switch-whenwithaOR，同时也

这篇文章主要围绕AngularJS：ng-switch-when with a OR展开，旨在为您提供一份详细的参考资料。我们将全面介绍AngularJS：ng-switch-when with a OR，同时也会为您带来Angular.js ng-switch-何时不使用动态数据？、Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程、Angular2 ngSwitch不工作、angularjs – Angular JS Touch和Swipe的实用方法。

• AngularJS：ng-switch-when with a OR
• Angular.js ng-switch-何时不使用动态数据？
• Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
• Angular2 ngSwitch不工作
• angularjs – Angular JS Touch和Swipe

AngularJS：ng-switch-when with a OR

<div ng-repeat="w in windows" ng-show="visibleWindowId == w.id" ng-switch="w.type">
    <div ng-switch-when="val1 **OR** val2">
        sup
    </div>
</div>

Angular.js ng-switch-何时不使用动态数据？

<div ng-repeat="assignment in assignments" ng-animate="'animate'">
    <!-- ngSwitchWhen: {{assignment.id}} -->
</div>

<div ng-init="thisAssignment='one'">
     <div>
         <span ng-repeat="assignment in assignments">
              <button ng-click="thisAssignment = '{{assignment.id}}'">{{assignment.num}}</button>
         </span>
     </div>

     <div>
         <div ng-switch="thisAssignment">
              <div>
                   <div ng-repeat="assignment in assignments" ng-animate="'animate'">
                        <div ng-switch-when='{{assignment.id}}'>
                        <h2>{{assignment.name}}</h2>
                        <p>{{assignment.text}}</p>
                   </div>
              </div>
         </div>  
    </div>  
</div>

Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程

前言

最近在做一个项目改版，第一次在项目中真正使用Angular,和平时自己写写小demo,做做练习的感觉还是非常不同的，感觉非常的新鲜。有几个指令是经常用到的，这里由于这几个有点共性，所以一起介绍一下ng-if,ng-show/ng-hide,ng-switch 这几个指令。下面来看看详细的介绍：

共性

       1.这里个指令都是Angular框架提供给我们的设置页面内容显示和隐藏的方法，使用起来非常方便，尤其是做业务逻辑。

       2.都是通过一个表达式的值来实现切换显示的，只不过 ng-switch 可以是其他值，ng-if ng-show 就必须是 boolen了。

       3.我在使用过程中发现一个小技巧，我们通过表达式设置 ng-if 或者 ng-show 直接在页面中定义一个表达式，这个时候它的值其实是undefined，由于 ！== true 所以这部分默认也是隐藏。

那么既然是不同指令，就各自有专攻，那我们就来看看他们分别都有什么果实能力。。。(不看海贼的可以无视哈~~)

ng-show/ng-hide

在用原生js 或者 jquery的时候，我们一般都可以定义一个类，通过添加和删除这个类来实现元素的显示和隐藏切换。其实这部分从网上参考资料来看，Angular也是这样实现的，根据表达式正确与否，动态添加或者删除 ng-hide 这个Angualr预先定义好的class。调用方式具体如下：

可以是设置一个变量

<div ng-show=''show''></div>

也可以是直接使用 true / false

<div ng-show=''true''></div>

对于变量，我们在js 中直接设置这个值就可以。

这个指令的特性是，即使我们暂时隐藏这部分内容，它也会被dom 渲染。

ng-if

使用方式也是设置一个表达式：

可以是设置一个变量

<div ng-if=''more''></div>

也可以是直接使用 true / false

<div ng-if=''true''></div>

对于变量，我们在js 中直接设置这个值就可以。

这是一个能帮我们节省效率的指令，如果表达式值 === false , 则这部分不会在dom中渲染，或者原有的内容会被从dom中删除。所以如果有一部分内容，不需要一开始就显示，我们可以先用ng-if 让它隐藏。例如一个显示更多的下拉按钮，刚开始不显示的部分，可以ng-if 来设置，等我们点击了更多按钮，再设置ng-if = true 既可。这样子减少了页面渲染事件，提高了效率呢。

还有一个特性，ng-if 或创建自己的 scope，它通过原型继承父级的scope。一个典型的例子来自于参考资源1。

还有一个小坑，$scope上面我可以直接给一个属性赋值如：

$scope.showpage = ''abut''

但是如果直接赋值一个对象，对不起，需要先声明，再给对象添加属性

$scope.data = {};
$scope.data.showpage = ''about'';

ng-swith

使用方式比前前两个复杂一点，不过也非常直观，类似原生js 中的switch 函数：

在外层父级元素设置 ng-switch 为一个表达式A ，那么他的子元素相当于几个不同的选项，表达式A 对应哪个子元素的 ng-switch-with 值，就显示那部分。

<div ng-switch=''showpart''>
 <div ng-switch-default></div>
 <div ng-switch-with=''home''></div>
 <div ng-switch-with=''blog''></div>
 <div ng-switch-with=''about''></div>
 <div ng-switch-with=''contact''></div>
</div>

这也是一个能帮我们节省效率的指令。和ng-if 一样，一开始如果不等于父级的 ng-switch 表达式的值，则不会在页面渲染的，而且我们也可以通过 ng-switch-default 来设置默认的显示部分。比如以往常见的 Tab 选项卡，用这个指令实现起来就非常的容易。

这里有一点疑问，因为我在项目中，做的单页面应用，所有不同部分都在一个页面里面。那么我经常需要根据不同的ajax返回值，显示不同的部分，（特殊原因不能使用路由），所以我这里就是用的 ng-switch 指令，根据不同返回值，显示不同部分。虽然也能实现按需显示，但看到有文章说这样使用 ng-switch 并不是很妥当，路过的朋友，有了解的可以指点我一下！我在这先谢过了~~

后面我会继续分享Angular在项目开发中的经验，以及遇到的坑！

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者使用Angular.js能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。

Angular2 ngSwitch不工作

<!-- display closed date if status is closed,otherwise display active date -->
      <div ngSwitch="ACTV">
          <divngSwitchWhen="CLSD">
            <label for="closeDt">
                                        Close Date
                                        <span>required field</span>
                                    </label>
            <div>
              <datetime [timepicker]="false" [(ngModel)]="date2" id="close-date" name="close-date"></datetime>
            </div>
          </div>
          <divngSwitchWhen="ACTV">
            <label for="issueDt">
                                        Active Date
                                        <span>required field</span>
                                    </label>
            <div>
              <datetime [timepicker]="false" [(ngModel)]="date2" id="active-date" name="active-date"></datetime>
            </div>
          </div>
      </div>

<div [ngSwitch]="someVariable">
  <div *ngSwitchCase="value1">...</div>
  <div *ngSwitchCase="value2">...</div>
</div>

angularjs – Angular JS Touch和Swipe

今天关于AngularJS：ng-switch-when with a OR的分享就到这里，希望大家有所收获，若想了解更多关于Angular.js ng-switch-何时不使用动态数据？、Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程、Angular2 ngSwitch不工作、angularjs – Angular JS Touch和Swipe等相关知识，可以在本站进行查询。