angularjs-控制form及radio,checkbox,

#ng-value可以填写表达式
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src=‘js/angular.min.js‘> </script>
  <style type="text/css">
   .ng-cloak{display:none;}
  </style>
 </head>
 <body ng-app="hd" ng-cloak class="ng-cloak">
  <div ng-controller="ctrl">
   商品名称:<input type="text" ng-model="goods.name" /><br />
   商品价格:<input type="text" ng-model="goods.price" /><br />
   商品数量:<input type="text" ng-model="goods.num" /><br /> 
   商品总价:<input type=‘text‘ ng-value="goods.price*goods.num" readonly="readonly"/><br />
  </div>
  
  <script type="text/javascript">
   var m=angular.module(‘hd‘,[])
   m.controller(‘ctrl‘,[‘$scope‘,function($scope){
    $scope.goods={‘name‘:‘iphone‘,‘price‘:3000,‘num‘:0}
   }])
  </script>
 </body>
</html>
#ng-show关联单选框
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src=‘js/angular.min.js‘> </script>
  <style type="text/css">
   .ng-cloak{display:none;}
  </style>
 </head>
 <body ng-app="hd" ng-cloak class="ng-cloak">
  <div ng-controller="ctrl">
   显示 <input type="radio" ng-model="status" ng-value="1" /><br />
   关闭 <input type="radio" ng-model="status" ng-value=""/><br />
   {{status}}
   <text ng-show="status==1">正在维护中...</text>
  </div>
  
  <script type="text/javascript">
   var m=angular.module(‘hd‘,[])
   m.controller(‘ctrl‘,[‘$scope‘,function($scope){
    $scope.status=1
   }])
  </script>
 </body>
</html>
#复选框checkbox, 控制选中的值:ng-true-value="1" ng-false-value="0"
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src=‘js/angular.min.js‘> </script>
  <style type="text/css">
   .ng-cloak{display:none;}
  </style>
 </head>
 <body ng-app="hd" ng-cloak class="ng-cloak">
  <div ng-controller="ctrl">
   游戏 <input type="checkbox" ng-model="data.game" ng-true-value="1" ng-false-value="0" /><br />
   电影 <input type="checkbox" ng-model="data.movie" ng-true-value="1" ng-false-value="0" /><br />
   {{data.game}}
   <textarea ng-show="data.game==1">dota2</textarea>
   <textarea ng-show="data.movie">战狼2</textarea>
  </div>
  
  <script type="text/javascript">
   var m=angular.module(‘hd‘,[])
   m.controller(‘ctrl‘,[‘$scope‘,function($scope){
    $scope.data={‘game‘:0,‘movie‘:0}
   }])
  </script>
 </body>
</html>
时间: 2024-12-25 07:43:58

angularjs-控制form及radio,checkbox,的相关文章

form radio &amp; checkbox解决方案

orm radio & checkbox 的对齐一直是个问题,不仅不同浏览器不同,不同的字体,不同的文字大小也会表现不一样,相信纠结了一大批人,如果没有好好整理总结下得出一个经验,相信每次碰到这个鬼东西都是比较纠结的,很头疼啊 重置form radio & checkbox 因为不同浏览器解析不一样,有些默认margin,有些是默认padding,还有ie6,7连margin和padding即使设置为0后,所占的空间还是比较大,所以还是有必须重置下,一下就能解决很多麻烦 Css Code

【css--Form】字体为12px时表单中(radio,checkbox)与文字对齐

字体12px的对齐只是针对radio和checkbox CSS: <pre name="code" class="html">.form {font-size: 12px; line-height: 1.4} .form .txt {width: 180px; height: 25px; padding:3px; border:1px solid #dbdbdb; line-height: 25px; color:#999; vertical-align

Bootstrap关于表单控件(Radio,CheckBox)

表单控件(复选框checkbox和单选择按钮radio) Bootstrap框架中checkbox和radio有点特殊,Bootstrap针对他们做了一些特殊化处理,主要是checkbox和radio与label标签配合使用会出现一些小问题(最头痛的是对齐问题).使用Bootstrap框架,开发人员无需考虑太多,只需要按照下面的方法使用即可. <form role="form"> <div class="checkbox"> <labe

:radio :checkbox

匹配所有单选按钮 示例 描述: 查找所有单选按钮 HTML 代码: <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input ty

JSP的3种方式实现radio ,checkBox,select的默认选择值

JSP的3种方式实现radio ,checkBox,select的默认选择值.以radiao 为例:第一种方式:在jsp中使用java 脚本,这个方法最直接,不过脚本太多,不容易维护<%String state = request.getParrameter("state" )%> <td width="27"><input type="radio" name="state" value=&quo

jquery 【radio checkbox】选择

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Jquery/jquery-1.10.2.js" type="text/javascript"></script> <script type="text/javascript"> $(f

自定义radio/checkbox样式

<!doctype html> <html> <head> <meta charset="utf-8"> <title>自定义radio/checkbox样式</title> <style> *{ padding: 0; margin: 0; } input[type=checkbox]{ display: none; } /*未选中样式*/ .checkbox{ color: green; } /*选

微信小程序 - radio/checkbox自定义组件

自定义radio/checkbox组件,可根据自己要求自行修改 点击下载:示例 原文地址:https://www.cnblogs.com/cisum/p/10324607.html

angularjs 总结 (Form)

Forms 为了让form以及控件.ngModel富有样式,可以增加以下class: 通过在元素上添加repuired  angularjs自动更具状态切换这些class ng-valid (验证成功) ng-invalid (验证失败) ng-pristine(从未输入过) ng-dirty(输入国) 在angular中,表单是FormController的一个实例.表单实例可以随意地使用name属性暴露到scope中(只可意会,不可言传啊..) <!DOCTYPE HTML> <ht