标签:angularjs
angularjs 练习
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>规则设置</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
</head>
<body>
<div ng-App="myApp" ng-controller="myCtrl">
<p>请添加规则</p>
<hr>
<input type="checkbox" /> 是否到第三级机构 <input type="checkbox" /> 是否延伸 <br>
<hr>
合作机构编码:<input type="checkBox" name="gou" value="机构一"/> 机构一<input type="checkBox" name="gou" value="机构二"/> 机构二 <br>
车辆年限 :<input type="radio" name="car" value="一年" /> 一年<input type="radio" name="car" value="两年"/> 两年 <br>
保险期限 :<input type="radio" name="bao" value="一月"/> 一月<input type="radio" name="bao" value="两月"/> 两月 <br>
<input type="button" ng-click="sub()" value="添加规则"/>
<form id="rule" onsubmit="return onsub(rel)" method="post"></form>
<input type="button" ng-click="submit()" value="保存"/>
</div>
<script type="text/javascript" src="rule.js"></script>
</body>
</html>
rule.js
var app=angular.module(‘myApp‘,[])
app.controller(‘myCtrl‘,function($scope){
var i=0;
$scope.sub=function(){
if($("input[name=gou]:checked").val()!=null||$("input[name=car]:checked").val()!=null
||$("input[name=bao]:checked").val()!=null){
i++;
$("#rule").append("<div id=‘rel"+i+"‘>规则"+i+": </div>")
if($("input[name=gou]:checked").val()!=null){
$("#rel"+i).append("合作机构编码:");
$("input[name=gou]:checked").each(function(){
$("#rel"+i).append("<input type=‘text‘ style=‘border:0px;width:50px‘ name=‘gou‘ value=‘"+$(this).val()+"‘/>;");
});
//$("#rel"+i).append("+");
};
if($("input[name=car]:checked").val()!=null){
$("#rel"+i).append("车辆年限:");
$("input[name=car]:checked").each(function(){
$("#rel"+i).append("<input type=‘text‘ style=‘border:0px;width:50px‘ name=‘car‘ value=‘"+$(this).val()+"‘/>;");
});
//$("#rel"+i).append("+");
};
if($("input[name=bao]:checked").val()!=null){
$("#rel"+i).append("+保险期限:");
$("input[name=bao]:checked").each(function(){
$("#rel"+i).append("<input type=‘text‘ style=‘border:0px;width:50px‘ name=‘bao‘ value=‘"+$(this).val()+"‘/>;");
});
};
$("#rel"+i).append("<input type=‘button‘ onclick=‘del(this.parentNode)‘ value=‘删除‘/>")
}
}
$scope.submit=function(){
$("#rule").attr("action","rule.action")
$.ajax({
cache: true,
type: "POST",
url:"rule.action",
data:$(‘#rule‘).serialize(),// 你的formid
async: false,
dataType:"json",
error: function(request) {
alert("Connection error");
},
success: function(data) {
alert(data.rel);
}
});
}
});
function del(obj){
$(obj).html("");
}
标签:angularjs
原文地址:http://11050579.blog.51cto.com/11040579/1837762