标签: angular-ng-if

这个文档中有一个ng-if动画示例:https://docs.angularjs.org/api/ng/directive/ng 如果你快速反复点击复选框,你会发现会显示多个元素,I不知道如何避免它.

快速示例:

有一个路由参数(/ Home /:isLoggedIn)等于true或false.(/ Demo /#/ Home/false)和控制器属性

this.loggedIn = this.routeParams.loggedIn;

我有一个视图(Home.html)有两个元素,每个元素都有一个ng-if属性.

<div ng-if="home.loggedIn">
    Logged In!
</div>
<div ng-if="!home.loggedIn">
    Not Logged In...
</div>

如果我导航到/ Demo /#/ Home/true,则第一个元素显示,第二个元素不显示.如果我导航到/ Demo /#/ Home/false,则第一个元素不显示NOR执行第二个元素.

当loggedIn的值实际上为false时,我希望!home.loggedIn参数计算为true.

有什么建议吗？

我有点困惑.如果结果有几种情况之一,我需要隐藏块.但似乎它不能正常工作......

<div *ngIf="currentStatus !== 'open' || currentStatus !== 'reopen' ">

    <p padding text-center class="text-notification">{{message}}</p>

</div>

它只是出现在其他条件下.它既不适用于1条件也不适用于2.也试过*ngIf="currentStatus !== ('open' || 'reopen') "但它只适用于1种情况.

我在角度应用程序中有一个奇怪的行为,我不知道这是一个错误还是一个已知的限制:

'use strict';

var ctrl = function ($scope) {
    $scope.foo = false;
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="ctrl">
  foo: {{foo}}
  <div ng-if="foo" style="background-color: #f00;">
    <p>foo</p>
  </div>
  <div ng-if="!foo">
    <br/><button ng-click="foo = true;">Show foo</button>
  </div>
  <button ng-click="foo = true">Show foo</button>
</div>

http://jsfiddle.net/78R52/

我希望单击其中一个按钮会设置foo = true,但单击第一个按钮(在其中ng-if="!foo")不会更改模型.

测试版本是1.2.1.

我有一个简单的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' || …

我无法在导航栏上有选择地显示链接.根据谁登录(用户或管理员),我想更改导航栏上显示的链接.

以下是用户/管理员注销的一个此类实例的代码.

在navbar.component.html中 -

<li *ngIf="authService.userLoggedIn()== true && authService.adminLoggedIn() == false" 
       [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"> 
  <a (click)="onUserLogoutClick()" href="#">Logout</a>
</li>

<li *ngIf="(authService.adminLoggedIn() == true) && (authService.userLoggedIn() == false)" 
      [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
   <a (click)="onAdminLogoutClick()" href="#">Logout</a>
</li>

无论authService.adminLoggedIn()与authService.userLoggedIn()回报tokenNotExpired;

以下是navbar.component.ts中的相关代码-

 onUserLogoutClick() {
   this.authService.userLogout();
   this.flashMessage.show('You are now logged out', {cssClass: 'alert-success', timeout: 3000});
   this.router.navigate(['/login']);
   return false;   
 }

 onAdminLogoutClick() {
   this.authService.adminLogout();
   this.flashMessage.show('Administrator now logged out', {cssClass: 'alert-success', timeout: 3000});
   this.router.navigate(['/admin']);
   return false;   
 }

在authService.adminLogout()与authService.userLogout()刚刚清除存储在本地存储的令牌.

如果我犯的错误是愚蠢的,我会提前道歉.我是Angular的新手.

<div ng-if="true">visible</div>很容易,但由于ngIf甚至可以在评论中使用,</div>评论块的结束是什么？

试过,没有运气:

<!-- ng-if: true -->
....
<!-- ng-if -->

谢谢.

我想比较ng中的两个日期 - 如果这是我的玉文件的样子.

li.list-group-item(ng-if="app.Segments[0].StartDate.getTime() > date.getTime()")
    div.row
        div.col-xs-12
            span
                i.fa.fa-plus-square

如果第一段的startdate在今天之后,则此代码有望为我的ui添加li.

$scope.date = new Date();
$scope.app = {
    Segments: [{
       StartDate: 2014-11-15T04:00:00.000Z
       EndDate: 2014-11-20T04:00:00.000Z
    },
    {
        StartDate: 2014-11-21T04:00:00.000Z
        EndDate: 2014-11-25T04:00:00.000Z
    }]

}

反正有没有让这项工作？

我有一些陈述

<ng-template [ngIf]="xyz== 1">First</ng-template>
<ng-template [ngIf]="pqr == 2">Second</ng-template>
<ng-template [ngIf]="abc == 3">Third</ng-template>

上述陈述中的多个条件都可以成立.

但我想要的是,首先检查第一个声明是否为真,然后显示并保留其余部分

如果为false,则检查第二个,依此类推

怎么实现这个？

当我环绕我input的时候ng-if,隐藏并显示autofocus属性后没有生效:

这是代码:

  <!DOCTYPE html>
<html ng-app>

  <head>
    <script data-require="angularjs@1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-init="view={}; view.show = true">
    <button ng-click="view.show = !view.show">{{view.show ? "hide" : "show"}}</button>
    <div ng-if="view.show">
      <input autofocus />
    </div>
  </body>
</html>

以下是plunker:http://plnkr.co/edit/k7tb3xw5AsBYrhdlr3bA?p=preview

只需单击隐藏,然后在显示后,您将看到自动对焦不起作用!

在Chrome中只在第一个节目上工作,在FF和IE中它根本不起作用!