Angular.JS利用ng-disabled属性和ng-model实现禁用button效果

所属分类: 网络编程 / JavaScript 阅读数: 1564
收藏 0 赞 0 分享

前言

本文要实现的效果是在输入框内无文字时,提交button是不能点击状态,在输入文字后会变为可点击状态,效果图如下:

实现方法:

<div> 
 <div> 
  <textarea name="" id="" rows="3" class="form-control" ng-model="shyj" placeholder="在此输入审批意见"></textarea> 
 </div> 
 <div> 
  <div> 
   <button class="btn btn-sm btn-block btn-primary" ng-disabled="!shyj" 
    ng-click="agreeClick(SM.YGBH,SM.RQ,shyj);" ng-tap="$navigate.go('/home')"> 
   提交 
   </button> 
  </div> 
 </div> 
</div> 

controller里其实不用做什么操作,html已经实现禁用效果了。放上来给大家随便看看吧。

$scope.agreeClick=function(v_shyg,v_rq,shyj){//审核通过 
 $scope.v_shzt=0; 
 $scope.v_shyg=v_shyg; 
 $scope.v_rq=v_rq; 
 $scope.shyj=shyj; 
 $scope.v_lsh=0; 
 /*if(!$scope.shyj||$scope.shyj==''){ 
  myTip("审核意见不能为空"); 
  return false; 
 }*/ 
 HomeService.agreeClick({YGBH:$scope.YGBH,v_rq:$scope.v_rq,v_shzt:$scope.v_shzt,v_shyg:$scope.v_shyg,v_shyj:$scope.shyj,v_lsh:$scope.v_lsh}).then(function(data){ 
  var info=data.msg; 
  if (info[0].code === "0") {//查询到结果 
  myTip("审核成功"); 
   $navigate.go("/LogList"); 
  }else{ 
   myTip("审核失败:"+info[0].msg); 
  } 
//  console.log("desk: %o", data); 
//  $scope.LogList=data.answers[0]; 
//  $scope.abc=data.answers[0][0].YGBH; 
//  console.log("bb: %o",$scope.abc); 
   }); 
} 

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

更多精彩内容其他人还在看

验证javascript中Object和Function的关系的三段简单代码

今天重温经典书籍。这一次看的是博客园李战老师写的<<悟透JavaScript>>,也是被楼猪翻看最多的技术书籍之一。
收藏 0 赞 0 分享

用apply让javascript函数仅执行一次的代码

有时候我们只想要让某些脚步函数执行一次就算完成任务了。如何实现这种功能呢?简单模仿下面这段就可以轻松搞定了
收藏 0 赞 0 分享

两种简单实现菜单高亮显示的JS类代码

近期在写一个博客管理后台的前端,涉及在同一页面两种高亮显示当前菜单的需求.
收藏 0 赞 0 分享

js getElementsByTagName的简写方式

用最少的代码,做最多的事情. getElementsByTagName的简写方法.
收藏 0 赞 0 分享

JavaScript的单例模式 (singleton in Javascript)

JavaScript的单例模式 (singleton in Javascript)
收藏 0 赞 0 分享

JavaScript接口实现代码 (Interfaces In JavaScript)

接口是面向对象编程里的重要特性,遗憾的是JavaScript并没有提供对接口的支持!怎么实现接口呢?
收藏 0 赞 0 分享

js鼠标左右键 键盘值小结

js鼠标左右键,键盘值实现代码,主要方便检测鼠标的按键返回。
收藏 0 赞 0 分享

Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)

最近在做项目时用到了定时执行的js方法,setInterval与setTimeout时间长了不用有些生疏了,所以自己总结了一下,记下来,以便以后使用。
收藏 0 赞 0 分享

cnblogs TagCloud基于jquery的实现代码

自创"山寨版"的"博客园"TagCloud!...
收藏 0 赞 0 分享

JavaScript 开发规范要求(图文并茂)

作为一名开发人员(WEB前端JavaScript开发),不规范的开发不仅使日后代码维护变的困难,同时也不利于团队的合作,通常还会带来代码安全以及执行效率上的问题。
收藏 0 赞 0 分享
查看更多