angularJS 表单使用

变量监视

数据双向绑定是指模型与视图的绑定，在$scope.a依赖于$scope.b的情况下，当b变化时a是不会同步变化的。若想实现数据一致，需要使用$scope.$watch()函数。

比如下图所示应用，选择频道后，候选的计数器都是该频道下的计数器。



图1 计数器与频道是对应的 都是下拉列表
对应代码是：

// watch
$scope.$watch('config.counterChannel', function() {
	// 选择频道后，计数器要对应
	$scope.getCounterList($scope.config.counterChannel);
});

注意：$watch(监视内容，回调函数)一般用来监听基本类型数据，若监听整个对象可能不行。不过它有一个重载，$watch(监视内容，回调函数，deepWatch)，当最后一个参数为true时就可以监视对象了。

单选框

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

复选框

与单选框类似，只是<input>里面的type改为 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中。

文本框

与其他类似，只是<input>里面的type改为 text 即可。

文本域

允许多行输入，例子：

<textarea rows="5" class="form-control" maxlength="4085"   ng-model="config.where_clause"></textarea>