Angular 绑定

一、事件绑定

1. 创建doOnClick函数

2. 网页中绑定doOnClick方法

3. 效果图

二、 属性绑定

1. 定义imgUrl的网址

2. 定义img  src属性

另外一种写法

3. html 属性绑定

在网页中绑定size

4. css html 属性绑定

html绑定

5. css增加属性

原先已经有a 和b属性,

之后增加c属性

6. ngClass管理多个css

html code

<div [ngClass]="divClass">HI</div>

 

7. 样式属性

带有单位(px)的样式

<div [style.font-size.px]="isDev?‘100‘:‘50‘">是否是开发环境</div>

  

 

8.ngStyle使用

<div [ngStyle]="divStyle">haha</div>

 divStle定义

  divStyle: any = {
    color: ‘red‘,
    background: ‘yellow‘,
  };

  constructor() {
    setTimeout(() => {
      this.divStyle = {
        color: ‘yellow‘,
        background: ‘red‘,
      };

    }, 3000);
  }

 

三、双向绑定

html代码

app.module.ts 加入FormsModule

 

时间: 2024-08-05 07:26:19

Angular 绑定的相关文章

angular 绑定数据时添加HTML标签被识别的问题

由于安全性,angular本身会对绑定的HTML标签属性进行转义,所以有些情况下我们需要用到绑定的数据里面传入html标签的时候, 需要用到一个服务:$sce $sce 服务下面的一个 $sce.trustAsHtml() 会对绑定的内容已html方式设置为可信任,同时也要对使用的绑定数据的地方进行 ng-bind-html 绑定 不同于 ng-bind 当然如果需要使用 {{}} 表达式的数据绑定方式也可以使用自定义过滤器 filter 的形式: filter: app.filter('to_

Angular绑定数据时转义html标签

AngularJs在绑定数据时默认会以文本的形式出现在页面上,比如我现在有这样一段代码 <div ng-controller="testCtrl">{{data}}</div> function testCtrl($scope) { $scope.data = '<span class="red">标红</span>'; } 那么在页面上必然会在也面上直接显示 <span class="red"

Angular绑定数据

1. 绑定数据 { 1.在组件ts文件中定义属性:public 属性名 =  ‘数据’ 2.在组件中html中定义:{{属性名}} } 2. 在html获得ts中的值(也可以绑定图片src) { 静态属性:title = ‘ming’ 动态属性:[title] = ‘ts中属性名字’ } 3. Html获得ts中标签 Html中:[innerHTML] = ‘content’ ts中:public content = ‘<h2>你好<h2>’; 4. 绑定样式和类名 [ngClas

优化Angular应用的性能

优化Angular应用的性能 MVVM框架的性能,其实就取决于几个因素: 监控的个数 数据变更检测与绑定的方式 索引的性能 数据的大小 数据的结构 我们要优化Angular项目的性能,也需要从这几个方面入手. 1. 减少监控值的个数 监控值的个数怎么减少呢? 考虑极端情况,在不引入Angular的时候,监控的个数是为0的,每当我们有需要绑定的数据项,就产生了监控值. 我们注意到,Angular里面使用了一种HTML模板语法来做绑定,开发业务项目非常方便,但考虑一下,这种所谓的“模板”,其实与我们

angular学习笔记(九)-css类和样式3

再来看一个选择li列表的例子: 点击li中的任意项,被点击的li高亮显示: <!DOCTYPE html> <html ng-app> <head> <title>6.3css类和样式</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="scri

vue入门 vue与react和Angular的关系和区别

一.为什么学习vue.js vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/v2/api/ 二.vue.js是什么 Vue是一个"MVVM框架(库)",和angular类似,相比angular小巧,比较容易上手 Vue是一个构建用户界面点的渐进式框架,与其他重量级框架不同的是,vue采用自底向上增量开发的设计 vue的核心库"只关注视图层",并

Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结

Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结 1. 本文范围 1 2. Angular的优点 1 2.1. 双向数据绑定 1 2.2. dsl化 2 2.3. 依赖注入 2 2.4. 指令 2 3. 手动绑定数据spa方式以及与ajax 与dwr的集成 2 4. 格式化数据 2 4.1. 多字段组合格式化 3 4.2. 输出html 4 5. 输出作为函数参数调用 4 6. 加载完成事件 5 7. 常见错误 5 7.1. Atitit.a

angular核心原理解析1:angular自启动过程

angularJS的源代码整体上来说是一个自执行函数,在angularJS加载完成后,就会自动执行了. angular源代码中: angular = window.angular || (window.angular = {}) 定义一个全局的angular空对象. 然后: bindJQuery(); //绑定jQuery publishExternalAPI(angular); //扩展angular对象的方法和属性 jqLite(document).ready(function() { an

AngularJS源码解析1:angular自启动过程

angularJS加载进来后,会有一个立即执行函数调用,在源代码的最下面是angular初始化的地方.代码展示: bindJQuery(); publishExternalAPI(angular); jqLite(document).ready(function() { angularInit(document, bootstrap); }); bindJQuery方法的作用是:检查你的主页面是否引用了jquery,没有的话,就用angular本身自带的JQLite,否则使用你引用的jquery