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>