(四上)Angular指令,ng-bind指令,ng-init 指令,ng-click指令,ng-repeat 指令

  • AngularJS 有一套完整的、可扩展的、用来帮助 Web 应用开发的指令集
  • 在 DOM 编译期间,和 HTML 关联着的指令会被检测到,并且被执行
  • 在 AngularJS 中将前缀为 ng- 这种属性称之为指令,其作用就是为 DOM 元素调用方法、定义行为绑定数据等
  • 简单说:当一个 Angular 应用启动,Angular 就会遍历 DOM 树来解析 HTML,根据指令不同,完成不同操作
  • HTML5 允许扩展的(自制的)属性,以 data- 开头。
  • AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效。
  • 二者效果相同。
  • ng-app指令用来标明一个AngularJS应用程序
  • 标记在一个AngularJS的作用范围的根对象上
  • 系统执行时会自动的执行根对象范围内的其他指令
  • 可以在同一个页面创建多个ng-app节点
    ng-bind指令
  • ng-bind指令将指定变量或表达式的值显示在元素innerHTML
  • 如果给定的变量或表达式修改了,指定元素的innerHTML 也会修改。

例子

<input type="text"  ng-model="text">             --将文本框的值绑定到text变量
你输入的值是:<span ng-bind="text"></span>   --动态显示text变量的值

ng-init 指令

  • 初始化应用时创建一个变量,并给变量赋值
  • ng-init 执行给定的表达式
  • 建议用controller代替

例子

<div ng-app="" ng-init="myText='Hello World!'">
<h1>{{myText}}</h1>

ng-click指令

  • Angular的点击事件处理器,给元素通过click事件绑定$scope对象的方法

例子

<input type="text"  ng-model="text"> 
<button ng-click="show()">显示输入值</button> 

$scope.show = function(){
        alert("您输入的内容是:" + $scope.text);
        }

ng-repeat 指令

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值