angularJS 表单使用

简介: 1.变量监视 数据双向绑定是指模型与视图的绑定,在$scope.a依赖于$scope.b的情况下,当b变化时a是不会同步变化的。若想实现数据一致,需要使用$scope.$watch()函数。 比如下图所示应用,选择频道后,候选的计数器都是该频道下的计数器。 图1 计数器与频道是对应的 都是下拉列表 对应代码是: // watch $scope.$watch('co

1.变量监视

数据双向绑定是指模型与视图的绑定,在$scope.a依赖于$scope.b的情况下,当b变化时a是不会同步变化的。若想实现数据一致,需要使用$scope.$watch()函数。
比如下图所示应用,选择频道后,候选的计数器都是该频道下的计数器。

图1 计数器与频道是对应的 都是下拉列表
对应代码是:
// watch
$scope.$watch('config.counterChannel', function() {
	// 选择频道后,计数器要对应
	$scope.getCounterList($scope.config.counterChannel);
});
注意:$watch(监视内容,回调函数)一般用来监听基本类型数据,若监听整个对象可能不行。不过它有一个重载,$watch(监视内容,回调函数,deepWatch),当最后一个参数为true时就可以监视对象了。
好像还有一个类似的函数,watchCollections。

2.单选框

单选框是一个圆。单选意味着点击后不能反选,只能点击其它选项来改变选择。

图2 单选框示意
对应代码;
<form>
	<div >
		<span class="col-sm-3" style="display: inline-block" > 
		<!--若选了这个,那么$scope.config.ruleAction的值就是‘blockIp’-->
		<input type="radio" ng-model="config.ruleAction" value="blockIp" />封ip
		</span>
		<span class="col-sm-3" style="display: inline-block" > 
		<input type="radio" ng-model="config.ruleAction" value="captcha" />弹验证码
		</span>
	</div>
</form>

3.复选框

复选框是一个矩形。首先需要将<input>里面的type改为 checkbox
ng-true-value 表示选中该项时模型的值;na-false-value自然就表示不选该项时数据模型的值。
一个例子:
<div class="form-group">
	<label class="control-label col-sm-2">group by</label>

	<div class="col-sm-10">
		<!-- checkbox -->
		<span class="col-sm-6" style="display: inline-block" >
		 <input type="checkbox" ng-model="config.groupby_clause.ip" ng-true-value="checked" ng-false-value="unchecked" >ip
		 <input type="checkbox" ng-model="config.groupby_clause.url" ng-true-value="checked" ng-false-value="unchecked" >URL
		</span>
	</div>
</div>
对应视图:
图 3-1 checkbox视图

下拉列表

html:
<div class="form-group form-inline">
	<label class="col-sm-2 control-label" style="padding-left: 0px">
		计数器:
	</label> 
	<select class="col-sm-10 form-control" 
			ng-model="config.counter"
			ng-options="item.name as item.name for item in counterList">
	</select>
</div>

下拉菜单之所以方便是因为高级的 ng-options指令: item.a as item.b 意思是把b属性显示在下拉菜单里,a属性绑定到model中。若想选择后直接触发事件,可以用 ng-change 指令,把ng-model的值当做函数实参穿进去。

文本框

与其他类似,只是<input>里面的type改为  text 即可。
为了少用鼠标,可以为输入框绑定回车事件。例子见下:
//html
<p>
	cityid:<input type="text" ng-model="request.cityid"
		ng-keyup="myKeyup($event)">
</p>
//js
$scope.myKeyup = function(e){
        var keycode = window.event?e.keyCode:e.which;
		//13 is the key of 'Enter'
        if(keycode==13){
			/*do something*/
		}
}

文本域

使用< textarea>标签,允许多行输入,例子:
<textarea rows="5" class="form-control" maxlength="4085"   ng-model="config.where_clause"></textarea>


目录
相关文章
|
JavaScript
AngularJs-03-数据的双向绑定
<!DOCTYPE html> <html lang="zh" ng-app="myapp"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.
1218 0
|
数据格式 JSON JavaScript
|
数据安全/隐私保护
|
Web App开发 JavaScript 前端开发