Question

我有自定义指令并在模板中使用它：

<input check-value-type>

如何按条件使用此指令，如：

<input @if(model.value) check-value-type @end />

或者做somithing：

@if(cond)
<input check-value-type />
@else
<input/>
@endif

Answer 1

您可以尝试这样的事情：

<input ng-if="typeOf model.Value !== 'number'" check-value-type />
<input ng-if="typeOf model.Value === 'number'" />

但是ng-if表达式应放在你可以访问的模型函数中，而不是直接放在ng-if语句中。

<input ng-if="!checkValue(model.value)" check-value-type>
<input ng-if="checkValue(model.value)" />

在控制器内

：

this.checkValue = function(value) {
    return typeOf value === number
}

根据您的情况，这将只渲染一个输入，尽管看起来有两个输入。

Answer 2

在Type脚本文件中，您可以设置loggedIn = true或false，并根据此布尔值我们可以操作DOM。

<ul  *ngIf="loggedIn">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<ul  *ngIf="!loggedIn">
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

同样在angular4中我们可以拥有if else

<div *ngIf="loggedIn; else list_two">
 <ul>
   <li>Item 1</li>
   <li>Item 2</li>
 </ul>
</div>

<ng-template #list_two>
 <ul>
   <li>Item 1</li>
   <li>Item 2</li>
 </ul>
</ng-template>

如果是那么<或者

<div *ngIf="loggedIn;then list_one else list_two"></div>

<ng-template #list_one>
 <ul>
   <li>Item 1</li>
   <li>Item 2</li>
 </ul>
</ng-template>
<ng-template #list_two>
 <ul>
   <li>Item 1</li>
   <li>Item 2</li>
 </ul>
</ng-template>

Answer 3

Angular 1.x提供了ngIf，一个有条件地运行/编译标签的指令。

文档：https://docs.angularjs.org/api/ng/directive/ngIf

这允许您根据评估为布尔值的条件有条件地在页面上呈现标记。在你的情况下：

<input ng-if="model.value"/>

或者如果你在范围内有一个返回布尔值的函数checkValue(param)：

<input ng-if="checkValue(value)"/>

次要附录：

Angular还提供了ngShow / ngHide，它不会显示元素，但仍会生成其代码。如果您计划切换可见性或需要其代码仍然执行，那么这是可取的。

如何在Angular 1.5中使用指令？

3 个答案: