angularJS与play配合使用的各种控件的使用技巧

来源：互联网发布：javascript 视频聊天编辑：程序博客网时间：2024/04/30 07:22

1、select控件

html及js操作

<select id="styleId" class="form-control textlist" style="width:140px" ng-model="gcstyles" ng-options="style.id as style.styleName for style in styles"></select>

<select ng-model="string" ng-init="string='2'"><option val="2">2</option><option val="1">1</option></select>

ng-init初始化的意思

ng-model中string值是2，则默认绑定2.

绑定及赋值

var getStyleList=function(){          serve.get({              url:"/modulename/Styles/list",              success:function(data){                  //绑定                $scope.styles=data;                $scope.styles.id=@scope.styles[0].id;          //赋值        var cb=function(){              if($(this).val() == data.styleId){                  $(this).attr('selected', 'selected');              }          }          if (typeof(cb) == "function") {              $timeout(function(){                  $("#styleId option").each(cb);              });          }      });  }

track by style.id的作用：数组中是不允许存在两个相同的数字的。为了规避这个错误，需要定义自己的track by表达式。例如这个，如果重复，则报错，问题是我定义了反而总是有空值被选中，我不想让select有空值啊，郁闷中，未解，目前暂时去掉这个表达式。

获取select控件的值的时候，切记用这个取,不要用JQuery来获取，JQuery获取不到正确的value值。直接用它：$scope.styles.id，这里面存了整个选择的对象。

2、checkbox控件

<input type="checkbox" ng-model="obj.chk" ng-checked="obj.chk" ng-click="checkAll()"><span ng-bind="obj.chk.name"></span>

下面是绑定及其他操作

    var obj=function(){    serve.get({        url:"/module/Obj/list",        success:function(data){        $scope.obj=data;        }        });    }

//获取会员等级选中操作    var getChecked = function() {        for(var i=0; i<$scope.obj.chk.length; i++) {    for(var j=0; j<$scope.obj.length; j++) {    if($scope.obj[j].id == $scope.obj.chk[i].id) {    $scope.obj[j].checked = true;    }    }    }    };

3、弹出小窗口

html主页面要添加一个层

<div ng-include="'/module/Template/referDialog'"></div>

子窗口这么写

<script type="text/ng-template" id="referDialog">.........<div>

主页面JS打开界面

打开窗口$scope.select = function(){<span style="white-space:pre"></span>debugger;ngDialog.open({template: 'referDialog',scope:$scope,controller: 'ReferTemplate',width: 1000});};//接收数据$scope.$on('param1', function(event, data) {    $scope.result= data;});

子页面JS

reliers.push("ngDialog");//选择商品corpApp.controller('ReferTemplate',['$scope','ngDialog','serve','$timeout', function($scope,ngDialog,serve,$timeout){    $scope.$emit('param1', data);    ngDialog.closeAll();}

还需要注意一个打开html的命令：

public class Template{        public static void referDialog(){render("module/template/referDialog.html");}}

4、日期控件

5、打开的初始化界面

6、打开初始化完成后的赋值界面

7、get服务

8、post服务

9、传参过程

0 0