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

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、传参过程