{{today | date:'yyyy-MM-dd HH:mm:ss' }}
大小写转换
{{str | uppercase}}
{{str | lowercase}}
小数位数
接收的参数格式为{最少整数位数}.{最少小数位数}-{最多小数位数}
{{p | number:'1.2-4'}}
对象序列化
{{ { name: 'semlinker' } | json }}
slice
{{ 'semlinker' | slice:0:3 }}
管道链
{{ 'semlinker' | slice:0:3 | uppercase }}
自定义管道
自定义管道的步骤：
定义
import { Pipe, PipeTransform } from '@angular/core';[@Pipe](/user/Pipe)({ name: 'welcome' })export class WelcomePipe implements PipeTransform {transform(value: string): string {if(!value) return value;if(typeof value !== 'string') {throw new Error('Invalid pipe argument for WelcomePipe');}return "Welcome to " + value;}}
使用
{{ 'semlinker' | welcome }}
定义
import {Pipe, PipeTransform} from '@angular/core';[@Pipe](/user/Pipe)({name: 'repeat'})export class RepeatPipe implements PipeTransform {transform(value: any, times: number) {return value.repeat(times);}}
**使用**
{{ 'lo' | repeat:3 }}
表单案例
mport { Component, OnInit } from '@angular/core';@Component({selector: 'app-form',templateUrl: './form.component.html',styleUrls: ['./form.component.scss']})export class FormComponent implements OnInit {public peopleInfo:any = {username: '',sex: '2',cityList: ['北京', '上海', '深圳'],city: '上海',hobby:[{title: '吃饭',checked:false},{title:'睡觉',checked:false},{title:'敲代码',checked:true}],mark:''}constructor() { }ngOnInit() {}doSubmit(){/*jquerydom操作let usernameDom:any=document.getElementById('username');console.log(usernameDom.value);*/console.log(this.peopleInfo);}}
人员登记系统
- 【AngularJS】—— 10 指令的复用
- 刷官方中文angularJs手册例子
- Angular 进阶之
- 手把手教你如何开始一个angular模块
- angular中ng-repeat与swiper异步踩坑
- 父子组件传值以及组件的销毁
- 二 Angular基础知识学习
- 六 Angular动态表单生成
- angular中使用swiper，分页点样式不显示的问题
- Angularjs directive 指令复用，指令传参