angularjs教程——input相关指令详解

最新推荐文章于 2020-06-27 13:16:02 发布
最新推荐文章于 2020-06-27 13:16:02 发布
阅读量137 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/cacti/p/5948694.html
版权

一、angularjs的指令

*ng-disabled（按钮禁用）—服务$interval

<!DOCTYPE HTML>
<html ng-app='myApp'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="angular.min.js"></script>
<style type="text/css">

</style>
<script>
var m1=angular.module('myApp',[]);

m1.controller('Aaa',['$scope','$interval',function($scope,$interval){
  var iNow=5;
  $scope.text=iNow+'秒';
  $scope.isDisabled=true;
  var timer=$interval(function(){
      iNow--;
      $scope.text=iNow+'秒';
      if(iNow==0){
          $interval.cancel(timer);
          $scope.text='可以点击啦';
          $scope.isDisabled=false;
          }
      },1000)
  
}]);

</script>
<title>无标题文档</title>
</head>

<body>
<div ng-controller="Aaa">
  <input type="button" value="{{text}}" ng-disabled="isDisabled">
</div>
</body>
</html>

*ng-readonly（只能针对输入框）

<!DOCTYPE HTML>
<html ng-app='myApp'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="angular.min.js"></script>
<style type="text/css">

</style>
<script>
var m1=angular.module('myApp',[]);

m1.controller('Aaa',['$scope','$interval',function($scope,$interval){
  var iNow=5;
  $scope.text=iNow+'秒';
  $scope.isDisabled=true;
  var timer=$interval(function(){
      iNow--;
      $scope.text=iNow+'秒';
      if(iNow==0){
          $interval.cancel(timer);
          $scope.text='可以点击啦';
          $scope.isDisabled=false;
          }
      },1000)
  
}]);

</script>
<title>无标题文档</title>
</head>

<body>
<div ng-controller="Aaa">

  <input type="text" value="{{text}}" ng-readonly="isDisabled">
</div>
</body>
</html>

 

*ng-checked

<!DOCTYPE HTML>
<html ng-app='myApp'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="angular.min.js"></script>
<style type="text/css">

</style>
<script>
var m1=angular.module('myApp',[]);

m1.controller('Aaa',['$scope','$interval',function($scope,$interval){
  var iNow=5;
  $scope.text=iNow+'秒';
  $scope.isDisabled=true;
  var timer=$interval(function(){
      iNow--;
      $scope.text=iNow+'秒';
      if(iNow==0){
          $interval.cancel(timer);
          $scope.text='可以点击啦';
          $scope.isDisabled=false;
          }
      },1000)
  
}]);

</script>
<title>无标题文档</title>
</head>

<body>
<div ng-controller="Aaa">
  <input type="checkbox" value="{{text}}" ng-checked="isDisabled">
</div>
</body>
</html>

*ng-value(用户体验比用)

<!DOCTYPE HTML>
<html ng-app='myApp'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="angular.min.js"></script>
<style type="text/css">

</style>
<script>
var m1=angular.module('myApp',[]);

m1.controller('Aaa',['$scope','$interval',function($scope,$interval){
  var iNow=5;
  $scope.text=iNow+'秒';
  $scope.isDisabled=true;
  var timer=$interval(function(){
      iNow--;
      $scope.text=iNow+'秒';
      if(iNow==0){
          $interval.cancel(timer);
          $scope.text='可以点击啦';
          $scope.isDisabled=false;
          }
      },1000)
  
}]);

</script>
<title>无标题文档</title>
</head>

<body>
<div ng-controller="Aaa">
  <input type="button" ng-value="text" ng-disabled="isDisabled">
  <input type="text" ng-value="text" ng-readonly="isDisabled">
  <input type="checkbox" ng-value="text" ng-checked="isDisabled">
</div>
</body>
</html>

 

转载于:https://www.cnblogs.com/cacti/p/5948694.html

dengyu6119
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AngularJS入门教程之ng-checked 指令详解
01-19
AngularJS ng-checked 指令 AngularJS 实例 选择一个或选择所有选项: <!DOCTYPE html> <html> <head> <meta charset=utf-8> [removed][removed] </head> <body ng-app=> <p>My...
angularJS中input相关指令详解
outsiderlcy的博客
11-04 2213
input相关指令 ng-disabled（按钮、输入框禁用的状态） ng-readonly ng-checked ng-value
angularjs—指令input
xiaozhen0610的博客
06-27 708
input[text] input一般和ngModel结合使用来实现双向绑定，同时angular提供了很多表单校验的指令 required 必填 ngRequired 必填（ngRequired可以控制是否是必填校验） ngMinlength 最小长度 ngMaxlength 最大长度 pattern 正则匹配 ngPattern 正则匹配 ngChange 内容改变时触发 ngTrim 是否trim数据，默认true #html <div ng-controller="LearnCtrl">
angularjs学习笔记—指令input
weixin_34125592的博客
03-30 220
input[text] input一般和ngModel结合使用来实现双向绑定，同时angular提供了很多表单校验的指令 required 必填 ngRequired 必填（ngRequired可以控制是否是必填校验） ngMinlength 最小长度 ngMaxlength 最大长度 pattern 正则匹配 ngPattern...
（3）AngularJS 1.X 之和Input相关的指令
王培晓Carpenter
02-06 1003
引言 AngularJS的input验证 1 input验证代码实现 11 验证标签的合法性 12 验证标签的错误性 13 结合合法和错误实现我们的表单验证 2 AngularJS帮助文档 AngularJS的input其他扩展 1 控制标签是否可用 2 控制input标签只可读 3 控制复选框选中 4 控制select选中 总结 1.引言      在上一篇博客中主要说了两个指令：ng-model
深究AngularJS——如何获取input的焦点（自定义指令）
爱雨轩
05-12 2万+
我佛慈悲，取经（转载）请说明出处，以便更多人来本寺取得真经，阿弥陀佛1. 写在前面关于如何获取input框、textarea等的焦点，网上有许多文章都只是会跟你说ng-focus这个内置指令。像这种解答，只能说明作者并为真正理解人家的需求。ng-focus是一个事件，跟原生JS（JavaScript）的onfocus是一样的，当我们点击input框时，就会触发该事件，而在该事件里我们可以调用一个函数
AngularJS基础 ng-model 指令详解及示例代码
12-29
AngularJS ng-model 指令 AngularJS 实例 绑定输入框的值到 scope 变量中： <!DOCTYPE html> <html> <head> <meta charset=utf-8> [removed][removed] </head> <body> <...
AngularJS基础 ng-disabled 指令详解及简单示例
11-29
AngularJS ng-disabled 指令 AngularJS 实例 禁用或启用输入框: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> [removed][removed] </head> <body ng-app=""> 点击这里...
AngularJS入门教程之AngularJS指令
01-19
比如标签的href属性可以来指定链接的...ng-app 指令初始化一个 AngularJS 应用程序。 ng-init 指令初始化应用程序数据。 ng-model 指令把元素值（比如输入域的值）绑定到应用程序。 ng-app指令 ng-app 指令启动一个Angu
AngularJS ng-blur 指令详解及简单实例
11-22
AngularJS ng-blur 指令 AngularJS 实例 当输入框失去焦点(onblur)时执行表达式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> [removed][removed] </head> <body ng-...
angularjs input
superjunjin的专栏
01-10 1763
input[checkbox]http://docs.ngnice.com/api/ng/input/input%5Bcheckbox%5D复选框：ng-model为true，即为选中状态（选中后，ng-model置为true）ng-true-value：设置选中的值 ng-false-value：设置未选中的值<script> function Ctrl($scope) { $sco
angular实现input输入监听
CASER_HDMI的博客
08-10 1万+
最近做用户注册登录时，需要监控用户的输入以此来给用户提示，用到了angular的$watch功能，以下是例子： jsp：<form class="register ng-scope" ng-app="regist_app" onsubmit="registSumbitValid()" ng-controller="regist_control"> <div class="item">
Angularjs input file 上传文件
xiaoguangtouqiang的博客
06-26 5099
Angularjs 通过http post的方式来提交上传的图片，并实时预览图片上传结果
AngularJS 中 点击按钮 使焦点在指定文本框中
CapMiachael的博客
05-11 1703
AngularJS 中 点击按钮 使焦点在指定文本框中 自定义指令 app.directive('focusMe', ['$timeout', '$parse', function ($timeout, $parse) { return { //scope: true, // optionally create a child scope link...
Angularjs中input的指令和属性
weixin_34273479的博客
04-14 252
建议添加 novalidate属性（可无值）到form标签上，这样可以保证在表单不合法的情况下阻止浏览器继续提交数据。 可以给表单元素 input 添加 required 属性（可无值），让该表单成为必填项，如： &lt;form action="" name="formName" novalidate ng-controller="test"&gt; &lt;input type=...
AngularJS ng-repeat绑定input元素的值
maomaolaoshi的博客
11-22 2575
使用repeat循环输出指定的HTML，绑定input元素。 ng-bind ng-bind在使用赋值表达式生成数据模型的同时，还绑定变量到元素的innerHTML中； ng-value ng-value在使用赋值表达式生成数据模型的同时，还绑定变量到元素的value属性中； ng-model ng-model有点特殊，专用于表单元素，即只能用于表单元素，用于其它元素无效. 它实现了数据...
AngularJS input自动聚焦
待花开花谢的博客
09-02 1万+
当我们在使用ionic进行开发的时候，使用angularjs中的ng-focus指令并没有效果。 比如当我们在需要点击某个按钮然后弹出输入框，并且需要自动聚焦到这个输入框的时候。如果使用angularjs的ng-focus指令，这样是没有任何效果的。 这时候就需要我们重新封装focus指令。 .directive('eventFocus', function(focus) { ret
AngularJs ng-change事件/指令
热门推荐
天马3798
09-17 5万+
定义和用法 ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。 ng-change 指令需要搭配 ng-model 指令使用。 AngularJS ng-change 指令指令不会覆盖原生的 onchange 事件, 如果触发该事件，ng-change 表达式与原生的 onchange 事件都会执行。 ng-change 事
angularjs怎样将input框的disabled与值绑定
最新发布
06-02
在AngularJS中，可以使用ng-disabled指令将input框的disabled属性与作用域中的变量绑定起来，实现动态控制input框的disabled状态。 例如，如果想要将一个按钮的disabled状态与一个作用域中的变量isDisabled绑定起来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值