标签: angular-ng-if

如何在AngularJS中显示是/否而不是真/假

我正在使用cellTemplate在网格中显示数据,现在我必须在ng-grid中显示数据,我可以在一列中显示包含true或false值的数据,请指导我如何显示真假数据喜欢是或否,即,对于真值,我必须显示是和假值为否.请指导我做出所需的结果.

angularjs ng-grid angular-ng-if

2
推荐指数
1
解决办法
1万
查看次数

有条件地包括Angular App中的侧边栏和标题

在某些视图中,我想要一个侧边栏和标题,有些我不想.使用AngularJS,实现这一目标的最佳方法是什么.

我当前的解决方案是在侧边栏和标题DIV上使用ng-if,并在我的控制器中,将$ scope变量设置为true或false,具体取决于我希望侧边栏和标题显示的视图.

一个具体的例子是Youtube.com.在Youtube的主页上,请注意有一个侧边栏和一个带有过滤器的子标题:"要注意什么"和"音乐".但是,在任何视频页面上,侧边栏和子标题都不存在.我想在AngularJS中实现这一点.

的index.html

    <html ng-app="demoApp">

    <body ng-controller="demoAppMainController">

        <header>
            <ng-include src="'./partials/mainHeader.html'"></ng-include>
            <ng-include ng-if="showSubHeader" src="'./partials/mainSubHeader.html'"></ng-include>
        </header>

        <main>
            <ng-view></ng-view>
        </main>


    </body>
    </html>
Run Code Online (Sandbox Code Playgroud)

discussionBoard.html

    <div class="discussionBoard" ng-controller="DiscussionBoardController">
         <h2>DiscussionBoard</h2>
    </div>
Run Code Online (Sandbox Code Playgroud)

controllers.js

    var demoAppControllers = angular.module('demoAppControllers', []);

    demoAppControllers.controller('demoAppMainController', ['$scope', function($scope) {
            $scope.showSubHeader = true;
    }]);

    opinionLensControllers.controller('DiscussionBoardController', ['$scope', function($scope) {
            $scope.showSubHeader = false;
    }]);
Run Code Online (Sandbox Code Playgroud)

angularjs angularjs-ng-include angular-ng-if

2
推荐指数
1
解决办法
2887
查看次数

如何在angular2中显示ngFor中的1个元素?

我有一个简单的ngFor循环数组.但是,我添加了一个条件,即索引< 5保持添加标记.之后,我想添加一个额外的标签,只需使用一个下拉列表来查看其余的标签.但它不起作用.

<li *ngFor="let tag of module.Tags; let i = index">
  <a *ngIf="i<5" href="#" class="span-tag tag">{{ tag }}</a>
  <div *ngIf="module.Tags.length > 5 && i == 6">DropDown Button</div>
</li>
Run Code Online (Sandbox Code Playgroud)

这里的功能是我不想向用户显示无限数量的标签,我想将其限制为仅5个标签,并且在5个标签之后有一个按钮,用于显示剩余标签的下拉列表.

这可以在angular2中做到吗?

如果是的话,请赐教.

arrays tags angular-ng-if ngfor angular

2
推荐指数
1
解决办法
6708
查看次数

如何在Angular2中使用* ngIf有条件地添加链接以显示具有价值的链接

我只想在有价值的情况下有条件地显示链接,并且不确定如何检查。我正在进行API调用,并使用该值填充数据。我尝试使用ngIf进行过滤, <a href="{{profil.FacebookUrl}}" *ngIf="profile.FacebookUrl != '' && profile.FacebookUrl != 'null' && profile.FacebookUrl != 'undefined'"</a> 但似乎都无法正常工作,但我仍然看到数据。

angular-ng-if angular2-template angular

2
推荐指数
1
解决办法
312
查看次数

角 4 | 触发 *ngIf 时创建额外的 div

美好的一天,我在这里做什么?我正在调用 API 数据,但是在我的if条件下,它似乎在验证为 false 时创建了额外的 div。

<div *ngFor="let apidata of data">
    <div class="box" *ngIf="apidata.Zone == 8">
      <div class="box-assignmentnumber-holder">
        <span id="AssignmentNumber">{{apidata.Assignment}}</span>
      </div>
      <div class="newAssignment">
        <span>{{ apidata.Operator == null ? 'New' : apidata.Operator }}</span>
      </div>
    </div>
  </div>
Run Code Online (Sandbox Code Playgroud)

在我的代码中消除额外 div 的最佳方法是什么?

下面的示例结果..

<div></div> <---extra div when false
<div></div> <---extra div when false
<div class="box">
     <div class="box-assignmentnumber-holder">
          <span>123123</span>
     </div>
</div>
<div></div> <---extra div when false
Run Code Online (Sandbox Code Playgroud)

angular-ng-if ngfor angular

2
推荐指数
1
解决办法
2006
查看次数

根据值隐藏和显示元素 Angular 2

我有一些布尔变量,可以是 true 或 false,根据该值我必须在 HTML 中显示一些元素,如下所示:

<p *ngif=isOwner>Test</p>
Run Code Online (Sandbox Code Playgroud)

问题是我必须隐藏该元素的值为 false,但要显示该元素的值为 true:

this.storage.get('User').then((val) => {
    this.isOwner = val.Owner.IsOwner;
});
Run Code Online (Sandbox Code Playgroud)

在 Angular 2 中,仅在 HTML 中,值将始终存在,并且是 true 或 false,正确的方法是什么?

angular-ng-if angular

2
推荐指数
1
解决办法
1万
查看次数

*ng如果不工作,只有当离子页面上的东西发生变化时

我在使用“* ngIf”时遇到问题,显然它什么也不做,但是当离子页面上的某些内容发生变化时,例如,当单击输入或屏幕从纵向变为横向时,键盘会显示它显示更改(隐藏/显示) 我做了一个简单的例子:

页面.html

<ion-header>
  <ion-navbar>
     <ion-title>Page</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
   <div *ngIf="loadingVisible">
      <img src="assets/imgs/example.jpg" alt="">
   </div>

   <button ion-button (click)='showorhide();'>click to show or hide</button>
</ion-content>
Run Code Online (Sandbox Code Playgroud)

页面.ts

import { Component } from '@angular/core';
import { NavController} from 'ionic-angular';


@IonicPage()
@Component({
   selector: 'page-new-table',
   templateUrl: 'new-table.html',
})

export class NewTablePage {

 public loadingVisible:boolean = false;

 constructor(public navCtrl: NavController){

 }

 showorhide(){
    this.loadingVisible = this.loadingVisible ? false : true;
    console.log(this.loadingVisible);
 }
}
Run Code Online (Sandbox Code Playgroud)

我不知道为什么会这样,一些想法?谢谢!

angular-ng-if ionic-framework angular

2
推荐指数
1
解决办法
6453
查看次数

用于空字符串验证的 Ngif 角度 5

我正在努力验证从服务器检索到的空字符串

它通常很简单,只是不起作用

<div class="ui-g-2 info-txt"
     *ngIf="appointment.Notes !==null || 
     appointment.Notes !== ''">
     <i class="fa fa-commenting-o" aria-hidden="true"</i>
</div>

<div class="ui-g-5 info-txt"
     *ngIf="appointment.Notes !==null ||     
     appointment.Notes !== ''">
     *emphasized text*{{appointment.Notes}}
</div>

<div class="ui-g-7 info-txt"
     *ngIf="appointment.Notes === null || 
     appointment.Notes === ''"
     style="padding-top: 0;">
     no hay notas disponibles
</div>
Run Code Online (Sandbox Code Playgroud)

所以我正在检查一个空值或没有任何内容的字符串,问题是它仍然显示图标和空字符串

当 no hay 里面有一条消息时......没有显示,所以它在那一边工作得很好

任何帮助都非常感谢多年来一直坚持这一点。

我确定这是一个明显的我只是看不到它

typescript angular-ng-if angular angular5

2
推荐指数
1
解决办法
9304
查看次数

Angular ngIf formGroup

我在Angular上有一个窗体,该窗体允许根据下拉列表中选择的值显示输入。

这是我的代码示例:

(如果选择两个,则会出现一个输入)

https://stackblitz.com/edit/angular-fqkfyx

如果我离开[formGroup] =“ usForm”,则输入显示不起作用。另一方面,如果我删除标签表单的[formGroup] =“ usForm”,我的代码将按我的要求工作。因此,问题与[formGroup] =“ usForm”有关

我的html:

 <div class="offset-md-2">
  <form [formGroup]="usForm">
    <div class="div-champs">
      <p id="champs">Type
        <span id="required">*</span>
      </p>
      <div class="select-style ">
          <select [(ngModel)]="selectedOption" name="type">
              <option style="display:none">
              <option [value]="o.name" *ngFor="let o of options">
                {{o.name}}
              </option>
          </select>
      </div>
    </div>
    <p id="champs" *ngIf="selectedOption == 'two'">Appears
      <input type="appears" class="form-control" name="appears">
    </p>
  </form>
</div>
Run Code Online (Sandbox Code Playgroud)

我的component.ts:

import { Component, OnInit } from '@angular/core';

import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-create-us',
  templateUrl: './create-us.component.html',
  styleUrls: ['./create-us.component.css']
})
export class CreateUsComponent …
Run Code Online (Sandbox Code Playgroud)

html forms typescript angular-ng-if angular

2
推荐指数
1
解决办法
5418
查看次数

*ngIf 带按钮,禁用或未禁用 Angular 9

我有两个下拉菜单,它们是Retrieve单击按钮时调用的函数的参数。我想要发生的是当两个下拉菜单都没有选择数据时,Retrieve按钮被禁用。如果两个下拉菜单都有数据,那么我希望按钮正常运行。这是我当前的 html:

<div class="dropdown">
  <div class="input-group">
    <h4 class="sessionText">Session: </h4>
    <select [(ngModel)]='sessionReportFilter.sessionName'
            class="custom-select form-control-sm"
            (change)='sessionDataChange($event)'
            id="inputGroupSelect01">
      <option [value]="null">Select session...</option>
      <option *ngFor="let session of sessionData" [value]='session.sessionName'>
        {{session.sessionName}}
      </option>
    </select>
  </div>

  <div class="input-group">
    <h4 class="reportText">Report Date: </h4>
    <select [(ngModel)]='sessionReportFilter.fileName' *ngIf='currentSession' class="custom-select form-control-sm" id="inputGroupSelect01">
      <option [value]="null">Select report...</option>
      <option *ngFor="let report of currentSession.reportFiles"
              [value]="report">
        {{report}}
      </option>
    </select>
    <select *ngIf="currentSession === null" class="custom-select form-control-sm" id="inputGroupSelect01"></select>
  </div>
  <div>
    <button type="button" class="btn btn-primary" disabled="disabled">Retrieve</button>
    <button type="button" class="btn btn-primary" (click)="orderExceptionReportData()">Retrieve</button>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

我怎样才能达到预期的结果?

html angular-ng-if angular

2
推荐指数
1
解决办法
7159
查看次数