AngularJS 常用指令

Stella981
• 阅读 341

AngularJS 指令

AngularJS有一套完整的、可扩展的、用来帮助web应用开发的指令集,它使得HTML可以转变成“特定领域语言(DSL)”,是用来扩展浏览器能力的技术之一,在DOM编译期间,和HTML关联着的指令会被检测到,并且被执行,这使得指令可以为DOM指定行为,或者改变它。

AngularJS指令带有前缀ng-,我们也可以称之为“指令属性”,它就是绑定在DOM元素上的函数,可以调用方法、定义行为、绑定controller及$scope对象、操作DOM,等等。

当浏览器启动、开始解析HTML时,DOM元素上的指令属性就会跟其他属性一样被解析,也就是说当一个Angular.js应用启动,Angular编译器就会遍历DOM树来解析HTML,寻找这些指令属性函数,在一个DOM元素上找到一个或多个这样的指令属性函数,它们就会被收集起来、排序,然后按照优先级顺序被执行。

ng-app

ng-app定义一个AngularJS应用程序,它是应用程序的起点,会自动初始化AngularJS框架。AngularJS在加载整个文档后找到文档中拥有ng-app指令的元素,编译该元素及其子元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
    <script>
        var app = angular.module('myApp', []);
    </script>
</body>
</html>
  • 该元素的父元素或兄弟元素不会被编译。

  • 在当个HTML中只允许存在一个ng-app指令

  • 我们也可以不定义ng-app 指令,手动初始化AngularJS

    // 指定document元素,调用angular.bootstrap 函数,手动初始化AngularJS angular.element(document).ready(function () { angular.bootstrap(document); });

ng-init

ng-init指令初始化应用程序数据,也就是为AngularJS应用程序定义初始值,通常情况下,我们会使用一个控制器或模块来代替它。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app ng-init="msg='hello world!';name='chenjy';age='16'">
    <div>
        name:<span>{{name}}</span>,
        age:<span>{{age}}</span>
    </div>
</body>
</html>

ng-model

ng-model指令用于AngularJS中的双向数据绑定。它将<input><select><textarea>元素绑定到$ scope对象上的指定属性。因此,元素的值将是属性的值,反之亦然。

<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app>
    your name:<input type="text" ng-model="name"/>,
    your name:{{name}}
</body>
</html>

ng-bind

ng-bind将应用程序数据绑定到元素上。如果数据的值发生改变,会更新元素。

<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app>
    your name:<input type="text" ng-model="name">,
    your name:<span ng-bind="name"></span>
</body>
</html>

ng-bind和表达式{{}}很像,但是ng-bind是在angularJS解析渲染完毕后才将数据显示出来的。 对于首个页面中的数据绑定操作,建议采用ng-bind,以避免其未被渲染的模板被用户看到。

ng-repeat

ng-repeat对指定数组集合中的每一项都重复一次HTML。

<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app ng-init="namesList=['chenjy','tom','jerry']">
    <ul>
        <li ng-repeat="name in namesList">
                {{name}}
            </li>
    </ul>    
</body>
</html>

如果我们把namesList=['chenjy','tom','jerry']改成namesList=['chenjy','chenjy','jerry']

你会发现报错了!

Error: ngRepeat:dupes Duplicate Key in Repeater

dupes

  • ng-repeat 不允许collection中存在两个相同Id的对象,对于数字或者字符串等基本数据类型它的id就是本身的值。因此,数组是不允许存在两个相同的数字。需要自己定义track by 表达式。

  • {{name}}

ng-click

AngularJS提供的点击事件指令,对于按钮、链接等可以通过ng-click实现点击事件绑定。

<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app ng-init="age=16">
    age:<span ng-bind ="age"></span>
        <button ng-click="age=age+1">Change age</button>
</body>
</html>

ng-show和ng-if

ng-show和ng-if都可以用一个表达式来控制是否显示元素。

不同的是 ng-show 当表达式为false的时候只是给对应的元素添加了一个ng-hide的class隐藏元素。

ng-if如果值为false则会在渲染的过程中不加载元素。

<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app ng-init="isTom=false;isJerry=false">
    <span ng-if ="isTom">Tom</span>
    <button ng-click="isTom=!isTom">Change</button>
    <br />
    <span ng-show ="isJerry">Jerry</span>
    <button ng-click="isJerry=!isJerry">Change</button>
</body>
</html>
  • ng-if 包含的元素都拥有自己的作用域。相对于控制器作用域来说,这个作用域属于一个子级作用域。如果想用ng-model绑定控制器的变量值,必须添加$parent标识

    <button ng-click="changeTom()">Change</button>
    age,<span ng-bind="tomAge"></span>
    
    <script>
    
    angular.module('myApp',[])
      .controller("myCtrl",function($scope){
          
          $scope.isTom = false;
          $scope.tomAge = 16;
          
          $scope.changeTom = function(){
              $scope.isTom = !$scope.isTom;
              $scope.tomAge++;
          }
      });
    

ng-readonly

从指定表达式返回的布尔值使HTML元素成为只读。如果表达式返回true,则该元素将变为只读,否则将变为只读。

ng-disabled

从指定表达式返回的布尔值禁用HTML元素。如果表达式返回true,则将禁用该元素,否则不会。适用于input, select,button 或 textarea标签。

<!DOCTYPE html>
<html ng-app ="myApp">
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
    <button ng-disabled="isTom">call Tom!</button>
    <button ng-click="changeTom()">Change</button>
    <script>
    
    angular.module('myApp',[])
      .controller("myCtrl",function($scope){
          $scope.isTom = false;
          $scope.changeTom = function(){
              $scope.isTom = !$scope.isTom;
          }
      });
</script>
</body>
</html>
  • 如果想在div、span起作用,可以通过pointer-events来实现。

    call Tom!

ng-class和ng-style

ng-classng-style都是通过表达式来控诉是否加载Class或css样式

ng-class:表达式返回值可以是字符串,对象,或一个数组

ng-style:表达式返回值都必须是对象

<!DOCTYPE html>
<html ng-app ="myApp">
<head>
<meta charset="utf-8">
<style>
    
    .yellow{
        background-color: yellow;
    }
    
    .red{
        background-color: red;
    }
    
</style>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
    <button ng-click="changeColor()" ng-class="{'yellow':isYellow,'red':!isYellow}">ChangeMyself</button>
    <button ng-click="changeColor()" ng-style="isYellow?yellow:red">ChangeMyself</button>
    <script>
    angular.module('myApp',[])
      .controller("myCtrl",function($scope){
        $scope.isYellow = false;
        $scope.changeColor = function(){
            $scope.isYellow = !$scope.isYellow;
        }
        
        $scope.yellow = {
            "background-color":"yellow"
        }
        
        $scope.red = {
            "background-color":"red"
        }
      });
</script>
</body>
</html>
点赞
收藏
评论区
推荐文章
浅梦一笑 浅梦一笑
2个月前
初学 Python 需要安装哪些软件?超级实用,小白必看!
编程这个东西是真的奇妙。对于懂得的人来说,会觉得这个工具是多么的好用、有趣,而对于小白来说,就如同大山一样。其实这个都可以理解,大家都是这样过来的。那么接下来就说一下python相关的东西吧,并说一下我对编程的理解。本人也是小白一名,如有不对的地方,还请各位大神指出01名词解释:如果在编程方面接触的比较少,那么对于软件这一块,有几个名词一定要了解,比如开发环
技术小男生 技术小男生
2个月前
linux环境jdk环境变量配置
1:编辑系统配置文件vi /etc/profile2:按字母键i进入编辑模式,在最底部添加内容: JAVAHOME/opt/jdk1.8.0152 CLASSPATH.:$JAVAHOME/lib/dt.jar:$JAVAHOME/lib/tools.jar PATH$JAVAHOME/bin:$PATH3:生效配置
光头强的博客 光头强的博客
2个月前
Java面向对象试题
1、 请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。 创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现 接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿 吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
2个月前
css问题
1、 在IOS中图片不显示(给图片加了圆角或者img没有父级) <div<img src""/</div div {width: 20px; height: 20px; borderradius: 20px; overflow: h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录 问题 用navicat导入数据时,报错: 原因这是因为当前的MySQL不支持datetime为0的情况。 解决修改sql\mode: sql\mode:SQL Mode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。 全局s
晴空闲云 晴空闲云
2个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。 盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
1个月前
快速入门|使用MemFire Cloud构建React Native应用程序
> MemFire Cloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Wesley13 Wesley13
1年前
MySQL查询按照指定规则排序
1.按照指定(单个)字段排序 select * from table_name order id desc; 2.按照指定(多个)字段排序 select * from table_name order id desc,status desc; 3.按照指定字段和规则排序 selec
Wesley13 Wesley13
1年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
#### 背景描述 # Time: 2019-01-24T00:08:14.705724+08:00 # User@Host: **[**] @ [**] Id: ** # Schema: sentrymeta Last_errno: 0 Killed: 0 # Query_time: 0.315758 Lock_
helloworld_28799839 helloworld_28799839
2个月前
常用知识整理
# Javascript ## 判断对象是否为空 ```js Object.keys(myObject).length === 0 ``` ## 经常使用的三元运算 > 我们经常遇到处理表格列状态字段如 `status` 的时候可以用到 ``` vue
helloworld_34035044 helloworld_34035044
4个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。 uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid() 或 uuid(sep)参数说明:sep 布尔值,生成的uuid中是否包含分隔符'',缺省为