标签: ng-switch

无论如何我可以让ng-switch在桌子内工作吗？表示例不起作用,但ul示例正常工作.问题是我真的需要表格示例.我正在使用角度1.07.

<table>
  <tbody ng-repeat="item in items">

  <tr><td>{{ item.heading }}</td></tr>

  <tr ng-repeat="row in item.fields" ng-switch on="row.nb">

  <div ng-switch-when="01">
    <td>{{ row.nb }}</td>
  </div>

  </tr>

  </tbody>

</table>

<ul ng-repeat="item in items">
  <li ng-repeat="row in item.fields" ng-switch on="row.nb">

  <div ng-switch-when="01">
    {{ row.nb }}
  </div>

  </li>
</ul>

我在 angular2 工作，很想知道<div>当变量是某种数据类型时我是否可以使用 ngSwitch 加载标签。

 <div [ng-switch]="value">
  <p *ng-switch-when="isObject(value)">This is Object</p>
  <p *ng-switch-when="isArray(value)">This is Array</p>
  <p *ng-switch-when="isBoolean(value)">This is Boolean</p>
  <p *ng-switch-when="isNumber(value)">This is Number</p>
  <p *ng-switch-default>This is Simple Text !</p>
</div>

div当变量是某种数据类型时，这是否可以加载标签？如果没有，有什么解决方法吗？

我正在尝试实现依赖于范围变量的测试.我想启用ng-switch-when来解析表达式.这就是我要做的事情(使用$ rootScope 更新):

it('should switch on array changes', inject(function($rootScope, $compile) {
  element = $compile(
    '<div ng-switch="select">' +
      '<div ng-switch-when="test[0]">test[0]:{{test[0]}}</div>' +
    '</div>')($rootScope);
  expect(element.html()).toEqual('<!-- ngSwitchWhen: test[0] -->');
  $rootScope.test = ["leog"];
  $rootScope.select = "leog";
  $rootScope.$apply();
  expect(element.text()).toEqual('test[0]:leog');
}));

我的问题是,我为此工作的实现没有得到范围变量"test"来评估和工作,因为我期望.这是实施:

var ngSwitchWhenDirective = ngDirective({
  transclude: 'element',
  priority: 800,
  require: '^ngSwitch',
  compile: function(element, attrs) {
    return function(scope, element, attr, ctrl, $transclude) {
      var expr = scope.$eval(attrs.ngSwitchWhen),
          ngSwitchWhen = expr !== undefined ? expr : attrs.ngSwitchWhen;
      ctrl.cases['!' + ngSwitchWhen] = (ctrl.cases['!' + …

我最近开始学习Angular2。

我想知道是否有可能使用 ngSwitch 或 ngIf angular2

针对特定数字范围的指令？

假设我想根据范围更新某些文本的颜色。

<25 = Mark the text in red
>25 && <75 = Mark the text in orange
>75 = Mark the text in green

如何使用 Angular2 ngIf/ngSwitch 指令实现相同的效果。

有没有办法写这样的东西？

<div [ngIf]="item.status < 25">
<h2 class="text-red">{{item.status}}</h2>
</div>
<div [ngIf]="item.status > 25 && item.status < 75">
<h2 class="headline text-orange">{{item.status}}</h2>
</div>
<div [ngIf]="item.status > 75">
<h2 class="headline text-green">{{item.status}}</h2>
</div>

或者任何与使用 ngSwitch、ngSwitchWhen 语句有关的内容。

我有一个 NgSwitch 模板。在 NgSwitch 中，我想获取对初始化模板的模板引用。像这样的东西：

    <div class="container" [ngSwitch]="model.type">
        <first-component #ref *ngSwitchCase="0"></first-component>
        <second-component #ref *ngSwitchCase="1"></second-component>
        <third-component #ref *ngSwitchCase="2"></third-component>
    </div>

当单击组件中的按钮时，我想调用初始化组件（第一/第二/第三）的方法（该方法在所有这三个组件实现的接口上定义）。问题是 ViewChild 未定义。如果我将 #ref 移动到容器 div，如下所示：

<div class="container" #ref [ngSwitch]="model.type">
    <first-component *ngSwitchCase="0"></first-component>
    <second-component *ngSwitchCase="1"></second-component>
    <third-component *ngSwitchCase="2"></third-component>
</div>

ViewChild（模板引用）已初始化，但随后我可以调用组件的方法。

如何同时使用 NgSwitch 指令和模板引用变量？或者另一方面，如何从其父级调用已初始化的组件（在这种情况下，我将 #ref 移动到容器 div）。

[ngSwitch]和一堆*ngIfs 有什么区别。我们应该关注任何性能因素吗？

* ngIf

  <div *ngIf="day === 'MONDAY'">
     Keep calm and pretend it's not Monday.
  </div>
  ...
  <div *ngIf="day === 'FRIDAY'">
     Happy Friday!
  </div>

[ngSwitch]

<ng-container [ngSwitch]="day">

     <div *ngSwitchCase="'MONDAY'">
         Keep calm and pretend it's not Monday.
     </div>
     ...
     <div *ngSwitchCase="'FRIDAY'">
         Happy Friday!
     </div>

</ng-container>

在这个例子中,使用ng-switch,我可以在不同的视图之间切换.每个视图都分配有一个控制器.

我在网上点了一个快速的样本:http://jsfiddle.net/FBHjZ/1/

看起来每次切换视图时控制器都会重新注册:如果在输入字段中输入val,请转到home并切换回设置,该值将丢失.

我怎么能阻止这个？基本上,我想要的是在视图之间切换时保持先前视图的状态.

我有一个ngSwitch,用于绑定到下拉列表的模型属性.它没有用,所以我试着简单地对这个值进行硬编码.仍然不起作用,它显示两个 div.我究竟做错了什么？如果它显而易见,请提前道歉,我是Angular2的新手.

我的html模板:

      <!-- display closed date if status is closed, otherwise display active date -->
      <div ngSwitch="ACTV">
          <div class="form-group row" ngSwitchWhen="CLSD">
            <label for="closeDt" class="col-md-4 form-control-label text-md-right">
                                        Close Date
                                        <span class="help-block">Required field</span>
                                    </label>
            <div class="col-md-4 col-xs-12">
              <datetime [timepicker]="false" [(ngModel)]="date2" id="close-date" name="close-date"></datetime>
            </div>
          </div>
          <div class="form-group row" ngSwitchWhen="ACTV">
            <label for="issueDt" class="col-md-4 form-control-label text-md-right">
                                        Active Date
                                        <span class="help-block">Required field</span>
                                    </label>
            <div class="col-md-4 col-xs-12">
              <datetime [timepicker]="false" [(ngModel)]="date2" id="active-date" name="active-date"></datetime>
            </div>
          </div>
      </div>

结果在npm服务器上:

是否有可能为此制作动画？我有这段代码

div([ngSwitch]="switchState")
  ul(fxLayout="row", fxLayoutAlign="space-between", *ngSwitchCase="0")
   some-list
  ul(fxLayout="row", fxLayoutAlign="space-between", *ngSwitchCase="1")
   second-list  
  ul(fxLayout="row", fxLayoutAlign="space-between", *ngSwitchCase="2")
   third-list

实际的开关功能工作正常,我想动画它,但我不确定css属性角度使用什么,我怀疑当时它甚至不存在于DOM中,所以是否有可能动画新增加到DOM？

我对 ngSwitch 指令有点困惑——它是“属性指令”还是“结构指令”。

属性指令用 '方括号编写如 [ngStyle]、[ngClass] 等（我们将其写为 [ngSwitch]，将其称为“属性指令”）。

<div [ngSwitch]="colorValue">
    <p *ngSwitchCase="red">Red</p>
    <p *ngSwitchCase="blue">Blue</p>
    <p *ngSwitchCase="green">Green</p>
</div>