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>
