我正在使用cellTemplate在网格中显示数据,现在我必须在ng-grid中显示数据,我可以在一列中显示包含true或false值的数据,请指导我如何显示真假数据喜欢是或否,即,对于真值,我必须显示是和假值为否.请指导我做出所需的结果.
在某些视图中,我想要一个侧边栏和标题,有些我不想.使用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) 我有一个简单的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中做到吗?
如果是的话,请赐教.
我只想在有价值的情况下有条件地显示链接,并且不确定如何检查。我正在进行API调用,并使用该值填充数据。我尝试使用ngIf进行过滤,
<a href="{{profil.FacebookUrl}}" *ngIf="profile.FacebookUrl != '' && profile.FacebookUrl != 'null' && profile.FacebookUrl != 'undefined'"</a>
但似乎都无法正常工作,但我仍然看到数据。
美好的一天,我在这里做什么?我正在调用 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) 我有一些布尔变量,可以是 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,正确的方法是什么?
我在使用“* 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)
我不知道为什么会这样,一些想法?谢谢!
我正在努力验证从服务器检索到的空字符串
它通常很简单,只是不起作用
<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 里面有一条消息时......没有显示,所以它在那一边工作得很好
任何帮助都非常感谢多年来一直坚持这一点。
我确定这是一个明显的我只是看不到它
我在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) 我有两个下拉菜单,它们是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)
我怎样才能达到预期的结果?