AngularJS 表单
发布时间:2017-01-07 编辑:小张个人博客 查看次数:3600
AngularJS 表单是输入控件的集合
以下 HTML input 元素被称为 HTML 控件:
input、select、button、textarea 元素
AngularJS 表单 ng-model与ng-value使用
<div ng-app="hd" ng-controller="_an" ng-cloak class="ng-cloak"> // ng-model 商品名: <input type="text" ng-model="goods.title"/><br/> 价 格: <input type="text" ng-model="goods.price" readonly="readonly" /><br/> 价 格: <input type="text" ng-model="goods.num" /><br/> // ng-valie 总价: <input type="text" ng-value=" goods.price * goods.num" readonly="readonly"/> </div> <script src="./AngularJS.js"></script> <script> var m = angular.module('hd',[]); m.controller('_an',['$scope',function($scope){ $scope.goods = {'title': '小米5','price':1750,'num':1}; }]); </script>
AngularJS 操作表单单选框
<div ng-app="hd" ng-controller="_an" ng-cloak class="ng-cloak"> <input type="radio" ng-model="states" ng-value="1" /> 开启 <input type="radio" ng-model="states" ng-value="0" /> 关闭 <!--ng-show 为 true: 显示 为false: 隐藏---> <p ng-show="states == 0"><small>关闭原因:</small>网站数据迁移中</p> </div> <script src="./AngularJS.js"></script> <script> var m = angular.module('hd',[]); m.controller('_an',['$scope',function($scope){ $scope.states = 1; }]); </script>
AngularJS 操作表单复选框
<div ng-app="hd" ng-controller="_an" ng-cloak class="ng-cloak"> <input type="checkbox" ng-model="data.game" ng-true-value="1" ng-false-value="0" /> 游戏 <input type="checkbox" ng-model="data.video" ng-true-value="1" ng-false-value="0"/> 电影 <!--ng-show 为 true: 显示 为false: 隐藏---> <p ng-show="data.game == 1">游戏</p> <p ng-show="data.video == 1">电影</p> </div> <script src="./AngularJS.js"></script> <script> var m = angular.module('hd',[]); m.controller('_an',['$scope',function($scope){ $scope.data= {'game': 0, 'video': 0}; }]); </script>
AngularJS 操作表单下拉框
ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表,但 ng-options 指令更适合创建下拉列表,它有以下优势:
使用 ng-options 的选项的一个对象, ng-repeat 是一个字符串。
<div ng-app="hd" ng-controller="_an" ng-cloak class="ng-cloak"> <select ng-options="v.value as v.name for v in data" ng-model="_an"> <option value="">--请选择--</option> </select> </div> <script src="./AngularJS.js"></script> <script> var m = angular.module('hd',[]); m.controller('_an',['$scope',function($scope){ // 设置默认选择 $scope._an='chongqing'; $scope.data= [{name :'重庆',value:'chongqing'},{name :'秀山',value:'xiushan'}]; }]); </script>
AngularJS---ng-selected、ng-disabled、ng-readonly实例
AngularJS---ng-selected实例操作
<select ng-model="sex"> <option ng-value="1">1</option> <!--ng-selected="true" 默认选中--> <option ng-value="2" ng-selected="true">2</option> </select>
AngularJS---ng-disabled实例操作
<input type="checkbox" ng-model="register" />注册协议<br/> <!-- ng-disabled= true 注册按钮点击无效 为false 时 可以点击注册"--> <button type="button" ng-disabled="!register">注册</button>
AngularJS---ng-readonly实例操作
<div ng-app="hd" ng-controller="_an" ng-cloak class="ng-cloak"> <!---readonly="readonly" 数据不能修改 可以提交到服务器处理----> <!---disabled="disabled" 数据不能修改 也不可提交----> <!---ng-readonly="goods.gid" 设定一个值来判断是修改还是添加----> email:<input type="text" readonly="readonly" ng-model="goods.email"/><br/><br/> num:<input type="text" disabled="disabled" ng-model="goods.num"/> price<input type="text" ng-readonly="goods.gid" ng-model="goods.price" /> </div> <script src="./AngularJS.js"></script> <script> var m = angular.module('hd',[]); m.controller('_an',['$scope',function($scope){ $scope.goods ={'gid': 1,'price':15,'num':10,'email':'[email protected]'}; }]); </script>
Copyright © 小张个人博客 All Rights Reserved 渝ICP备15006773号-1
联系方式:[email protected] | 本站文章仅供学习和参考