我需要根据条件禁用AngularJS中的div.是的我可以通过在外观中使用css更改(提供低对比度和较少颜色外观)来实现它,但我有ng-click属性.所以我也需要阻止那个召唤.我该怎么做？
这是我的代码:
<div ng-repeat="item in list.items" ng-click="goToFunction()" ng-disabled="true">
我正在创建一个AngularJS单页面应用程序.数据将从json-format中的Web服务获取.
问题是一些文本元素带有预先格式化的html标签
json输出:
{
"text": "<p><span style="text-decoration: underline;"><strong>test text</string></span></p>"
}
现在我如何显示此文本并直接呈现html,以便只向用户显示"test",其余用作标记？
<h1>{{data.text}}</h1>
我试图使用Angular 2中的Http类获取一个json文件.我按照Angular 2主页上的示例进行操作:https://angular.io/docs/js/latest/api/http/Http-class.html.但是,我收到以下错误消息.我使用的是Angular 2.0.0-alpha.37,traceur 0.0.91,systemjs 0.16.11,es6-module-loader 0.16.6和typescript 1.6.2.关于这里可能有什么问题的任何想法？
app.ts
///<reference path="typings/angular2/angular2.d.ts"/>
///<reference path="typings/angular2/http.d.ts"/>
import {Component, View, bootstrap} from 'angular2/angular2';
import {Http, HTTP_BINDINGS} from 'angular2/http';
@Component({
selector: 'myApp',
viewBindings: [HTTP_BINDINGS]
})
@View({
templateUrl: 'myapp.html'
})
class MyComponent {
data: Object;
constructor(http: Http) {
http.get('data.json').toRx().map(res => res.json()).subscribe(data => this.data = data);
}
}
bootstrap(MyComponent);
的index.html
<!DOCTYPE html>
<html>
<head>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="../node_modules/angular2/bundles/http.dev.js"></script>
<script src="../node_modules/traceur/bin/traceur-runtime.js"></script>
<script src="../node_modules/es6-module-loader/dist/es6-module-loader.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
</head>
<body>
<myApp></myApp>
<script>
System.import('app');
</script>
</body>
</html>
结果 …
我一直对一些我认为是Angular 4动画模块中的错误感到困惑.通过Angular 2.x中的动画,我制作了一个动画,从高度*动画到固定高度.这在Angular 2中运行得非常好.另一方面,当使用Angular 4时,在动画完成之前重新触发动画时,应用动画的元素的高度会出错.通配符(*)高度似乎是导致问题的原因.这是一个可以重现问题的演示片段.如果在元素处于*-height状态时双击该元素,则可以触发该错误:
import { Component } from '@angular/core';
import { trigger, animate, state, transition, style } from '@angular/animations';
@Component({
selector: 'app-root',
template: `
<h1 [@toggleAnimation]="isEnabled" (click)="isEnabled = isEnabled === 'active' ? 'inactive' : 'active'" style="background: blue">
{{title}}
</h1>`,
animations:
[
trigger('toggleAnimation', [
state('active', style({
height: '*',
})),
state('inactive', style({
height: '600px',
})),
transition('active <=> inactive', animate('500ms ease-in-out'))
])
]
})
export class AppComponent {
title = 'app works!';
isEnabled = 'inactive';
}
如何使用通配符值为高度设置动画有什么问题,或者通配符高度的表现方式是否有问题？
我正在处理的应用程序需要能够在路线中来回导航,因此当您从一个方向导航应用程序时,组件从左向右动画,当您向后导航时,它们从右向左导航.
即
component1 -> component2 = left -> right animation
component2 -> component1 = right -> left animation
我可以在NG4中轻松实现这一点,但问题是它不会导航退出和输入组件.退出组件刚刚消失,输入组件动画显示.
我也可以在NG2中实现这一点 - 但是当你有条件动画时会出现复杂情况.即.
component2 -> component3 = left -> right animation
component2 -> component1 = right -> left animation
这里的问题是根据下一个或上一个路线触发不同的动画.
有没有人在NG2或4中有解决方案来解决在任一方向同时动画两个视图的问题？
我没有把它放在plunkr中,因为我不知道如何设置NG4应用程序.道歉.
我的NG4解决方案基于这个演示应用程序 https://github.com/matsko/ng4-animations-preview
但基本上在我的app.component.ts我有以下动画:
animations: [
trigger('routerAnimations',[
transition('page1 => page2',[
style({transform: 'translateX(100%)'}),
animate('500ms')
]),
transition('page2 => page1', [
style({transform: 'translateX(-100%)'}),
animate('500ms')
]),
transition('page2 => page3',[
style({transform: 'translateX(100%)'}),
animate('500ms')
]),
transition('page3 => page2',[
style({transform: 'translateX(-100%)'}),
animate('500ms')
]),
transition('page3 => page4',[ …有谁知道为什么我的媒体查询代码不起作用？
<div class="box"></div>
.box {
background-color: red;
width: 100%;
height: 50px;
}
@media only screen and (max-device-width: 768px) {
.box {border: 5px solid blue;}
}
如何在angular2中制作页面过渡动画？
我试试这是代码,但没有工作
@Component({
selector:'myPagefirstPage',
})
@View({
template: `<div class="view-animate ng-animate" >
<h1>First Page</h1>
</div>`
我把我的动画类放在这样的css文件中
.view-animate.ng-enter {....}
但它不起作用
我正在尝试在异步管道上创建自定义管道，我尝试了很多解决方案，但仍然无法正常工作。这是代码片段。
product.sort.ts - 自定义管道
import { PipeTransform, Pipe } from '@angular/core';
import { Observable } from 'rxjs/Observable';
@Pipe({
name: 'sortByName'
})
export class ProductPipe implements PipeTransform{
/*transform(values: Array<any>, term:string){
return values.filter(obj => obj.pname.startsWith(term))
}*/
//CODE NOT WORKING >>>>>
transform($value: Observable<Array<any>>, term:string){
if($value){
$value.subscribe(
(obj) => {
return obj.filter(obj => obj.pname.startsWith(term))
}
)
}
}
}
products.component.ts - 主要组件
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { AppService …我创建了以下动画:
fade.animation.ts:
import { Component } from '@angular/core';
import { trigger, state, animate, query, transition, style, stagger } from
'@angular/animations';
export let fade = trigger('fade', [
state('void', style({ opacity: 0 })),
transition(':enter, :leave', [
animate(2000)
])
]);
我正在使用下一个组件:
<div id="mpl_loader" class="divCabeceraTitulo">
<div class="lineaTitulo">
<div class="logoMinisterio" [@fade]>
<img src="assets/imagenes/SRDLOGO.png">
</div>
<div class="logoGesRepro">
<img class="imgGesRepro" src="assets/imagenes/gesReproB.png">
</div>
<div class="descripcionAplicacion">
<span>título</span>
</div>
</div>
</div>
动画工作,问题是它只运行一次,当它加载组件时,我想要的是它"n"次.我怎么了？请帮忙
我有一系列模特.在模板中我使用管道
<div class="card-panel" *ngFor="let card of cards | sortByType">
<card-view [card]="card" [autoupdate]="true"></card-view>
</div>
在每个组件中,我都有一个更新数据的计时器.但是当模型更新时,管道不再运行.在这种情况下,有没有办法强制运行管道或做一些有角度的方式.
在卡片视图中,我有一个更新卡片变量的计时器.但Angular没有抓住这个变化来触发管道
angular ×7
html ×3
angular-pipe ×2
angularjs ×2
animation ×2
css ×2
css3 ×1
javascript ×1
json ×1
ng-bind-html ×1
repeat ×1
rxjs ×1
typescript ×1
wildcard ×1