AngularJS实现表单元素值绑定操作示例


Posted in Javascript onOctober 11, 2017

本文实例讲述了AngularJS实现表单元素值绑定操作。分享给大家供大家参考,具体如下:

ng-disabled:绑定控件的disabled属性
ng-show:显示或者隐藏元素:ms-visible
ng-hide:和ng-show的功能恰好相反

css内容:

div.d1{
 width: 20px;
 height: 20px;
 background-color: pink;
}
div.d2{
  width: 20px;
 height: 20px;
 background-color: black;
}

HTML正文:

<body ng-app="myApp" ng-controller="myctr">
<div>
请输入:<input type="text" placeholder="....." ng-disabled="flag">{{flag}}<br>
切换输入:<input type="button" value="switch input" ng-click="switchInput();">
</div>
<hr ng-init="checkValue=false">
input:<input type="text" ng-disabled="checkValue">{{checkValue}}<br>
<input type="checkbox" ng-model="checkValue">stop input <!-- 注意ng-model不能作用于单选框 -->
<hr>
<p>ng-show:flag</p>
<div class="d1" ng-show="flag"></div>
<p>ng-hide:checkValue</p>
<div class="d2" ng-hide="checkValue"></div>
<hr>
<!-- ng-click:后面可以直接跟表达式,表达式会直接执行,变量不支持++操作 -->
<input type="button" ng-click="count = count + 1" value="加1">:{{count}}

Javascript操作代码:

var app = angular.module('myApp', []);
app.controller('myctr', function($scope) {
  $scope.flag=false;
  $scope.count=0;
  $scope.switchInput=function(){
    $scope.flag=!$scope.flag;
  };
});

效果:

AngularJS实现表单元素值绑定操作示例

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
javascript检查日期格式的函数[比较全]
Oct 17 Javascript
jquery URL参数判断,确定菜单样式
May 31 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
JS正则表达式验证中文字符
May 08 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 #Javascript
js处理包含中文的字符串实例
Oct 11 #Javascript
解决JQuery全选/反选第二次失效的问题
Oct 11 #jQuery
React根据宽度自适应高度的示例代码
Oct 11 #Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 #Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 #Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 #Javascript
You might like
php中curl和file_get_content的区别
2014/05/10 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
javascript中的缓动效果实现程序
2012/12/29 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
javascript/jquery实现点击触发事件的方法分析
2019/11/11 jQuery
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
python把一个字符串切开的实例方法
2020/09/27 Python
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
影视艺术学院毕业生自荐信
2013/11/13 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
演讲比赛策划方案
2014/06/11 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
幸福来敲门观后感
2015/06/04 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
Python Django搭建文件下载服务器的实现
2021/05/10 Python
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB