当前位置: 首页 > news >正文

Angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的?

这里是修真院前端小课堂,每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能,本篇分享的是:

【Angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的?】

 

 

                                               

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍
指令是一个Dom元素上的标签(和元素上的属性,CSS类样式一样,属于这个Dom元素),它告诉AngualrJS的HTML编译器,去附加一个行为到这个Dom元素上去,这个行为可以改变这个Dom元素,或者这个Dom元素的子元素。

AngularJS通过被称为指令的新属性来扩展HTML。

AngularJS通过内置的指令来为应用添加功能。AngularJS内置指令是扩展的HTML属性,带有前缀ng-。

2.知识剖析
ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的?

ng-if:

ng-if指令用于在表达式为false时移除HTML元素。

如果ng-if语句执行的结果为true,会添加HTML元素,并显示。

ng-if指令不同于ng-hide/ng-show,ng-hide/ng-show是隐藏元素,设置元素的display为none。而ng-if是从DOM中移除元素。

ng-hide指令在表达式为true时隐藏指定的HTML元素。

ng-show指令在表达式为true时显示指定的HTML元素。

ng-class:

ng-class指令用于给HTML元素动态绑定一个或多个CSS类。

ng-class指令的值可以是字符串,对象,或一个数组。

如果是字符串,多个类名使用空格分隔。

如果是对象,需要使用key-value对,key为你想要添加的类名,value是一个布尔值。只有在value为true时类才会被添加。

如果是数组,可以由字符串或对象组合组成,数组的元素可以是字符串或对象。

第一种

 
 `

functionctr($scope){

$scope.test=“classname”;

}

这种方式完全没错,是angular提供的一种改变class的方式,但是在controller涉及了classname他让controller不再是一个干净的纯javascript意义的object。不推荐使用

第二种

 
 

functionCtr($scope){

$scope.isActive=true;

}

其结果是2中组合,isActive表达式为true,则active,负责inactive。

第三种

 


functionCtr($scope){

}

当isSelected=true则增加selectedclass,当isCar=true,则增加carclass,所以你结果可能是4种组合。

ng-option:

ng-options指令用于使用<options>填充<select>元素的选项。

ng-options属性可以在表达式中使用数组或对象来自动生成一个select中的option列表。ng-options与ng-repeat很相似,很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处,例如减少内存提高速度,以及提供选择框的选项来让用户选择。

ng-value:

ng-value指令用于设置input或select元素的value属性。

和value相比,它的值可以是表达式,所以相比之下可以实现更多需求。

比如当需要使用ng-repeat来动态生成input[]的时候,ngValue是很有用处的。

ng-click:

ng-click指令告诉了AngularJSHTML元素被点击后需要执行的操作。

如果是使用ng-click来实现函数的执行的话,还可以进行传参。

一个ng-click可以触发多个操作,

<buttonng-click="function1();function2()"></button>

先执行function1后执行function2

3.常见问题
1、ng-option表达式的写法

4.解决方案
1、ng-option表达式的写法

ng-options的值可以是一个内涵表达式(comprehensionexpression),其实这只是一种有趣的说法,简单来说就是它可以接收一个数组或者对象,并对它们进行循环,将内部的内容提供给select标签内部的选项。它可以是一下两种形式。

1、数组作为数据源

用数组中的值做标签。(labelforvalueinarray)

用数组中的值作为选中的标签。(selectaslabelforvalueinarray)

用数组中的值做标签组。(labelgroupbygroupforvalueinarray)

用数组中的值作为选中的标签组。(selectaslabelgroupbygroupforvalueinarraytrackbytrackexpr)

2、对象作为数据源

用对象的键-值(key-value)做标签。(labelfor(key,value)inobject)

用对象的键-值作为选中的标签。(selectaslabelfor(key,value)inobject)

用对象的键-值作为标签组。(labelgroupbygroupfor(key,value)inobject)

用对象的键-值作为选中的标签组。(selectaslabelgroupbygroupfor(key,value)inob)

5.编码实战
6.扩展思考
ng-if的作用域问题

ng-if指令会创建一个子级作用域,因此,如果在ng-if指令中添加了元素,并向元素属性增加ng-model指令,那么ng-model指令对应的作用域属性子级作用域,而并非控制器注入的$scope作用域对象,这点在进行双向数据绑定时,需要引起注意。

因此,解决ng-if中ng-model值无效的问题,主要方法就是在绑定值时添加$parent标识,或者用ng-show指令代替ng-if指令,这两种方法都可以达到同样的页面效果。

7.参考文献
参考一:菜鸟教程

参考二:[Angularjs]ng-select和ng-options

参考二:细说angularng-class

8.更多讨论
1 用angularJS的ng-model绑定到select上,会自动增加一个value为空的option,这是为什么?

原因:ng-model没有初始化导致的,如果ng-model所绑定的变量的值在ng-options绑定的value里面有,下拉选框中就不会有空白的一项,选中别的数据项以后消失;如果ng-model所绑定的变量的值不在ng-options绑定的value里面,下拉选框中就不会有空白一项,并且只有当ng-options绑定的value里有对应的text为空行时,这个空行才会一直存在于下拉选项里。

解决办法

方法一:将select中的一个option设置为空,就可以防止因添加ng-model自动添加空option的问题

方法二:自己预先添加一个value为空的option,再用ng-if="false"把它去掉

2  ng-if  和 ng-class可以互换着用吗?

解答:一般来说是没有问题的,但要注意ng-class是移除与添加dom元素

3 ng-click怎么传参?

相关文章:

  • 五个举措:现代化Jenkins 和终结“Jenkinsteins”
  • Vue官网教程学习过程中值得记录的一些事情
  • sass安装
  • LGPL与闭源程序
  • 聊聊flink的checkpoint配置
  • 堆的python实现及其应用
  • 创建一种深思熟虑的文化
  • 亚马逊Alexa借助神经网络生成播音员声音
  • 将VCSA 6.5添加到AD域
  • nginx 4层tcp代理获取真实ip
  • 刘鹏教授在新闻出版大数据应用管理技术专题培训班上作报告!
  • Mybatis配置返回为修改影响条数
  • spring源码-aop源码-5.1
  • 洛谷P2805 植物大战僵尸
  • python之上下文管理器与contextlib
  • 【391天】每日项目总结系列128(2018.03.03)
  • 【翻译】babel对TC39装饰器草案的实现
  • CentOS学习笔记 - 12. Nginx搭建Centos7.5远程repo
  • Java 多线程编程之:notify 和 wait 用法
  • JavaScript新鲜事·第5期
  • java取消线程实例
  • JS基础之数据类型、对象、原型、原型链、继承
  • KMP算法及优化
  • learning koa2.x
  • Linux编程学习笔记 | Linux多线程学习[2] - 线程的同步
  • npx命令介绍
  • Traffic-Sign Detection and Classification in the Wild 论文笔记
  • webgl (原生)基础入门指南【一】
  • 电商搜索引擎的架构设计和性能优化
  • 基于webpack 的 vue 多页架构
  • 解决iview多表头动态更改列元素发生的错误
  • 普通函数和构造函数的区别
  • 前端面试之闭包
  • 如何用Ubuntu和Xen来设置Kubernetes?
  • 运行时添加log4j2的appender
  • mysql面试题分组并合并列
  • # Swust 12th acm 邀请赛# [ A ] A+B problem [题解]
  • #HarmonyOS:基础语法
  • $.type 怎么精确判断对象类型的 --(源码学习2)
  • (2/2) 为了理解 UWP 的启动流程,我从零开始创建了一个 UWP 程序
  • (非本人原创)我们工作到底是为了什么?​——HP大中华区总裁孙振耀退休感言(r4笔记第60天)...
  • (黑马C++)L06 重载与继承
  • (强烈推荐)移动端音视频从零到上手(上)
  • (四)TensorRT | 基于 GPU 端的 Python 推理
  • (一)C语言之入门:使用Visual Studio Community 2022运行hello world
  • (一一四)第九章编程练习
  • (最完美)小米手机6X的Usb调试模式在哪里打开的流程
  • ./include/caffe/util/cudnn.hpp: In function ‘const char* cudnnGetErrorString(cudnnStatus_t)’: ./incl
  • .a文件和.so文件
  • .CSS-hover 的解释
  • .mat 文件的加载与创建 矩阵变图像? ∈ Matlab 使用笔记
  • .NET C# 使用 SetWindowsHookEx 监听鼠标或键盘消息以及此方法的坑
  • .net core webapi Startup 注入ConfigurePrimaryHttpMessageHandler
  • .Net MVC + EF搭建学生管理系统
  • .net Stream篇(六)