码迷,mamicode.com
首页 > Web开发 > 详细

angularjs 练习

时间:2016-08-14 14:45:10      阅读:312      评论:0      收藏:0      [点我收藏+]

标签: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 练习

标签:angularjs

原文地址:http://11050579.blog.51cto.com/11040579/1837762

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!