码迷,mamicode.com
首页 > Web开发 > 详细

angularjs-控制form及radio,checkbox,

时间:2017-08-10 18:09:15      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:angularjs

#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>


angularjs-控制form及radio,checkbox,

标签:angularjs

原文地址:http://f1yinsky.blog.51cto.com/12568071/1955170

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!