标签: ng-switch

我有以下ngSwitch:

<p ng-switch="status">
    <span ng-switch-when="wrong|incorrect">
       Wrong
    </span>
    <span ng-switch-default>
       Correct
    </span>
</p>

正如你所看到的,我有文本Wrong的两个选项wrong和correct.我试过(你可以看到)使用管道|,但这不起作用.有什么建议 ？

我有这个repro http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq显示当我点击'Title3'并在文本框中输入一个值,虽然输入的值显示在UI中反映,当我点击'click'按钮什么都没有为scope属性$ scope.test绑定了绑定.

我不知道ng-switch有什么问题,或者我做错了什么.感谢帮助!!!

http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq

是否可以在ng-switch-when中进行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根据我的数据生成一个CSS滑块.我知道数据存在并且能够为按钮生成数据,但由于某种原因,代码不会填充ng-switch.当我检查代码时,我看到了两次(我知道这是正确的,因为我只有两个项目):

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

我的实际代码:

<div ng-init="thisAssignment='one'">
     <div class="btn-group assignments" style="display: block; text-align: center; margin-bottom: 10px">
         <span ng-repeat="assignment in assignments">
              <button ng-click="thisAssignment = '{{assignment.id}}'" class="btn btn-primary">{{assignment.num}}</button>
         </span>
     </div>

     <div class="well" style="height: 170px;">
         <div ng-switch="thisAssignment">
              <div class="assignments">
                   <div ng-repeat="assignment in assignments" ng-animate="'animate'">
                        <div ng-switch-when='{{assignment.id}}' class="my-switch-animation">
                        <h2>{{assignment.name}}</h2>
                        <p>{{assignment.text}}</p>
                   </div>
              </div>
         </div>  
    </div>  
</div>

编辑:这是我试图模仿,但动态数据.http://plnkr.co/edit/WUCyCN68tDR1YzNnCWyS?p=preview

我有多个switch语句,但在某些情况下我需要常见的情况.所以,我正在尝试

OR operator => ||

例:

        <ng-container [ngSwitch]="options">
            <ng-container *ngSwitchCase="'a'">Code A</ng-container>
            <ng-container *ngSwitchCase="'b'">Code B</ng-container>
            <ng-container *ngSwitchCase="'c'">Code C</ng-container>
            <ng-container *ngSwitchCase="'d' || 'e' || 'f'">Common Code</ng-container>
            <ng-container *ngSwitchDefault>Code Default</ng-container>
        </ng-container>

输出:

if case = 'd' returns Common Code
else if case = 'e' and 'f' returns the Code Default 

这里的第二个案例由多个案例组成,现在默认情况下case 'd'只有工作且不起作用case 'e' and 'f'.

我在ngSwitchCase文档中看不到任何多个案例:

https://angular.io/docs/ts/latest/api/common/index/NgSwitchCase-directive.html https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html

Angular 2不支持||运营商ngSwitchCase吗？

我想用角度ng-switch检查布尔数据

这是我的代码.但它不起作用

<div ng-switch={{Item.ItemDetails.IsNew}}>
    <div ng-switch-when="true">
         <p class="new fontsize9 fontWeightBold">NEW</p>
    </div>
 </div>
    <div ng-switch={{Item.ItemDetails.IsFeatured}}>
         <div ng-switch-when="true">
               <div class="featured">
                    <p class="fontWeightBold fontsize8">featured</p>
               </div>
         </div>
     </div>

{{Item.ItemDetails.IsNew}}和{{Item.ItemDetails.IsFeatured}}的值为true或false

我有一个简单的ng-reapt,它显示了一个值列表.在某些输出中,我有几个ng-if来显示/隐藏DIV.

HTML:

<div ng-repeat="details in myDataSet">

    <p>{{ details.Name }}</p>
    <p>{{ details.DOB  }}</p>

       <div ng-if="details.Payment[0].Status == '0'">
           <p>No payment</p>
       </div>

       <div ng-if="details.Payment[0].Status == '1' || details.Payment[0].Status == '2'">
           <p>Late</p>
       </div>

       <div ng-if="details.Payment[0].Status == '3' || details.Payment[0].Status == '4' || details.Payment[0].Status == '5'">
           <p>Some payment made</p>
       </div>

       <div ng-if="details.Payment[0].Status == '6'">
           <p>Late and further taken out</p>
       </div>

       <div ng-if="details.Payment[0].Status != '0' || details.Payment[0].Status != '1' || details.Payment[0].Status != '2' || details.Payment[0].Status != '3' || details.Payment[0].Status != '4' || details.Payment[0].Status != '5' || …

当我来到这个部分时,我正在仔细阅读ngSwitch指令的AngularJS API参考:

在on ="..."属性(或ng-switch ="..."属性)上放置一个表达式

所以当然我想知道为什么有两种方法来放置表达式,因为它们似乎都以相同的方式工作.

<div ng-switch="expression">
<div ng-switch on="expression">

我认为有一个原因但我现在找不到任何东西.

要测试的Plunker:http://plnkr.co/edit/VAq1t4744bnNC6RgZtEn？p = preview

我在Angular中遇到过我没想到的行为,这篇文章的目的是找出这是一个错误或是否有意,并可能解释为什么会这样.

首先看看这个Plunkr:http://plnkr.co/edit/CB7k9r？p = preview .在示例中,我创建了一个名为array的数组,其中包含三个对象条目 此外,我根据输入字段的内容(称为切换)创建了一个ng-switch.当toggle的值为1时,它应该打印前缀为"1"的数组中的所有对象名称,否则以"other"为前缀.

这不会按预期工作,它会显示错误:

Error: Argument '?' is required at assertArg 

然而,同样的例子重写(http://plnkr.co/edit/68Mfux?p=preview),列表周围有一个额外的div,ng-switch移动到这个div,ng-switch-从li移到ul(将ng-repeat和ng-switch-when分开)确实按预期工作.

有人可以解释为什么会这样吗？

我正在创建一个随用户点击一起移动的"交互式菜单".我想知道是否有办法在ng-switch中包含html模板,因为每个'switch'中的所有逻辑都不同 - 它将导致巨大的html文件.

<div class="content" ng-switch on="selection">
 <div ng-switch-when="1" >
   <h1>1</h1>
 </div>
 <div ng-switch-when="2">
   <h1>2</h1>       
 </div>
</div>