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 相关文章推荐
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
快速入门Vue
Dec 19 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
JavaScript数据结构之链表的实现
Mar 19 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
jquery自定义组件实例详解
Dec 31 jQuery
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代码包装修正版
2008/03/15 PHP
PHP集成FCK的函数代码
2008/09/27 PHP
理解php Hash函数,增强密码安全
2011/02/25 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
玩转方法:call和apply
2014/05/08 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
js实现图片360度旋转
2017/01/22 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
vue addRoutes路由动态加载操作
2020/08/04 Javascript
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
Python实现批量压缩图片
2018/01/25 Python
Django学习之文件上传与下载
2019/10/06 Python
python requests抓取one推送文字和图片代码实例
2019/11/04 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
12月小学生校园广播稿
2014/02/04 职场文书
仓管岗位职责范本
2014/02/08 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
齐云山导游词
2015/02/06 职场文书
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
Python四款GUI图形界面库介绍
2022/06/05 Python