AngularJS之ng-show指令

1、问题背景

AngularJS的ng-show指令,当值为true,HTML元素显示;当值为false,HTML元素隐藏


2、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AngularJS之ng-show指令</title>
		<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
	</head>
	<body>
		<div ng-app="" ng-init="flag=true">
			<button ng-show="flag">查询</button><br>
			<input type="checkbox" ng-model="flag" />老鼠<br>
			<input type="radio" ng-show="!flag" />猫<br>
			<label>{{flag}}</label>
		</div>
	</body>
</html>

3、实现源码

(1)勾选复选框

勾选复选框,按钮显示,单选框隐藏


(2)取消勾选复选框

取消勾选复选框,按钮隐藏,单选框显示


处理AngularJSng-repeat指令数组的唯一性问题,首先需要了解ng-repeat在迭代过程中如何跟踪和识别数据项。如果数组中有重复的数据对象,AngularJS会抛出错误,因此通常需要给每个数据项一个唯一的标识符。这可以通过在ng-repeat中使用track by表达式来实现,比如track by item.id。这样的做法可以确保ng-repeat能够正确地追踪每个数据项,从而避免重复项引发的错误。 参考资源链接:[AngularJS面试重点:ng-if与ng-show/hide、作用域与数组重复问题解析](https://wenku.youkuaiyun.com/doc/61shmy82z3) 在ng-click事件中调用JavaScript原生对象的方法,需要特别注意的是,直接在HTML模板中使用JavaScript原生方法通常不可行,因为这些方法不会自动绑定到AngularJS的作用域中。要在ng-click中调用JavaScript方法,可以通过创建一个AngularJS服务或者工厂来封装这些原生方法,或者将方法绑定到当前的作用域或控制器中。例如,可以在控制器中定义一个函数,该函数内部调用JavaScript方法,并在ng-click中绑定这个函数。这样可以确保在点击事件发生时,函数被正确执行,并且JavaScript方法能够被调用。 以上方法均可以在《AngularJS面试重点:ng-if与ng-show/hide、作用域与数组重复问题解析》一文中找到详细的解释和示例,这本书是专门为准备AngularJS面试的技术人员准备的,它详细解释了如何在面试中正确使用这些指令和方法,帮助面试者在面试中展示其对AngularJS框架的深入理解。 参考资源链接:[AngularJS面试重点:ng-if与ng-show/hide、作用域与数组重复问题解析](https://wenku.youkuaiyun.com/doc/61shmy82z3)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值