使用angularjs将表单数据从一个视图发布到另一个视图

时间：2017-02-09 10:28:22

标签： angularjs

我使用angularJs设计了以下页面，在那里我使用路由和自定义服务

针对home.jsp 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script src="homeApp.js"></script>
</head>
<body>
<div ng-app="homeApp">
<div ng-controller="homeCtrl">
        <div  ng-view></div>
</div>
</div>
</body>
</html>

homeApp.js 

var app = angular.module('homeApp', ['ngRoute']);

app.config(function($routeProvider){
    $routeProvider.
                when('/dashBoard',{
                    templateUrl : 'dashBoard.html',
                    controller : 'homeCtrl'
                }).when('/createCase',{
                    templateUrl : 'createCase.html',
                    controller : 'flatCtrl'
                }).when('/submitCase',{
                    templateUrl : 'submitCase.html',
                    controller : 'flatCtrl'
                }).otherwise({
                    redirectTo : '/dashBoard'
                }); 
});

app.factory('homeService',function(){
    var bean = {};

    function set(data){
        alert("service = "+data);
        bean = data;
    }

    function get(){
        return bean;
    }

    return{
        set : set,
        get : get   
    }

});



app.controller('homeCtrl',function($scope){

    $scope.validateMe = function(isValid){
        if(isValid){
            alert("validated");
        }
    }
});

app.controller('flatCtrl', function($scope,$http,$window,homeService) {

    $scope.loadLists = function(){
        loadReviewTypes();
        loadPriorities();
        loadCamTypes();
    };

    loadReviewTypes = function(){
        var onSuccess = function (dataRT, status, headers, config) {
            $scope.reviewTypes = dataRT;
        };

        var onError = function (dataRT, status, headers, config) {
            alert("failed");
        }
        $http({
            method : 'POST',
            url : 'secondHello?strParam=RT'
            }).success(onSuccess).error(onError);
    };

    loadPriorities = function(){
        var onSuccess = function (dataP, status, headers, config) {
            $scope.priorities = dataP;
        };

        var onError = function (dataP, status, headers, config) {
            alert("failed");
        }
        $http({
            method : 'POST',
            url : 'secondHello?strParam=P'
            }).success(onSuccess).error(onError);
    };

    loadCamTypes = function(){
        var onSuccess = function (dataC, status, headers, config) {
            $scope.camTypes = dataC;
        };

        var onError = function (dataC, status, headers, config) {
            alert("failed");
        }
        $http({
            method : 'POST',
            url : 'secondHello?strParam=C'
            }).success(onSuccess).error(onError);
    };

    loadRatingTypes = function(id){
        var onSuccess = function (dataP, status, headers, config) {
            $scope.ratingTypes = dataP;
        };

        var onError = function (dataP, status, headers, config) {
            alert("failed");
        }
        $http({
            method : 'POST',
            url : 'secondHello?strParam=R&id='+id
            }).success(onSuccess).error(onError);       
    };  

    $scope.checkWord = function(msg){
        $scope.ratingYear = msg-1;
    };

    $scope.chgRatingType = function(type){
        if(type != '0'){
            loadRatingTypes(type);
        }else {
            $scope.ratingTypes = [];
        }
    };

    $scope.checkRatingYear = function(val1,val2){

        if(val1 > val2){
            alert('Rating year cannot be greater than Assessment year'); 
            $scope.ratingYear=$scope.assessmentYear-1;
        }
    };

    $scope.saveForm = function(){

        var onSuccess = function (data, status, headers, config) {
            alert(data);
            $scope.messages = data;
        };

        var onError = function (data, status, headers, config) {
            alert("failed");
        }
        alert(123);
        $http({
            method : 'POST',
            url : 'secondHello'
            }).success(onSuccess).error(onError);
    };

    $scope.form = {

    };

    $scope.postForm = function() {
        console.log("posting data....");
        alert("form.camNum = "+$scope.form.camNum);
        formData = $scope.form;
        console.log(formData);
        /*$http({method : 'POST',
               url : 'thirdHello',
               data : JSON.stringify($scope.form)
              }).success(function(){
                alert("success form data");
              }).error(function(){

              });*/
        $http({
            method : 'POST',
            url : 'thirdHello',
            contentType: 'application/json',
            data : JSON.stringify($scope.form)
        }).success(function(data, status, headers, config){
            alert("success form data ="+data);
            homeService.set(data);
            $scope.bean = homeService.get();
        }).error(function(data, status, headers, config){

        });
    };

});

angular.element(document).ready(function() {
    angular.bootstrap(document.getElementById("flat"), ['flatApp']);
});

dashBoard.html 

<div>
    <form name ="formDm">
    <table border="1">
            <tr>
                <td>
                Party Name : <input type="text" ng-model = "formD.partyNm" name = "partyNm" ng-minlength="5" required>
                <p ng-show="formDm.partyNm.$error.minlength">Please enter at least 2 char's</p>
                </td>
            </tr>
    </table>
    <!--<a href="#createCase" ng-click="validateMe(formDm.$valid)">New Case</a>-->
    <a type="submit" ng-href="#createCase">
        <button ng-click="validateMe(formDm.$valid)" type="submit">New Case</button>
    </a>
    <p>{{bean}}</p>
    </form>
</div>

createCase.html 

<div id="flat" ng-controller = "flatCtrl" >
<form method="post" ng-init="loadLists()">
    <div>
        <table border="1">
                <tr>
                    <td>
                    CAM No. : <input type="text" ng-model = "form.camNum" name = "camNum">
                    </td>
                    <td>
                    Party Name : <input type="text" ng-model = "form.partyNm" name = "partyNm">
                    </td>
                </tr>
                <tr>
                    <td>
                    Review Type : <select ng-model = "form.reviewType" name = "reviewType" ng-filter = "">
                                <option ng-repeat = "x in reviewTypes" value = "{{x.Id}}">
                                    {{x.strName}}
                                </option>
                                </select>
                    </td>
                    <td>
                    Priority : <select ng-model = "form.priority" name = "priority">
                                <option ng-repeat = "x in priorities" value = "{{x.Id}}">
                                    {{x.strName}}
                                </option>
                                </select>
                    </td>
                </tr>
                <tr>
                    <td>
                    CAM Type : <select ng-model = "form.camType" name = "camType" ng-filter = "" ng-change="chgRatingType(form.camType)">
                                <option ng-repeat = "x in camTypes" value = "{{x.Id}}">
                                    {{x.strName}}
                                </option>
                                </select>
                    </td>
                    <td>
                    Rating Type : <select ng-model = "form.ratingType" name = "ratingType" ng-filter = "">
                                <option ng-repeat = "x in ratingTypes" value = "{{x.Id}}">
                                    {{x.strName}}
                                </option>
                                </select>
                    </td>
                </tr>
                <tr>
                    <td>
                    Rating Year : <input type = "text" ng-model="form.ratingYear" ng-change="checkRatingYear(ratingYear,assessmentYear)">
                    </td>
                    <td>
                    Assessment Year : <input type = "text" ng-model = "form.assessmentYear" ng-keyup="checkWord(assessmentYear)">
                    </td>
                </tr>
        </table>
        <a type="submit" ng-href="#submitCase">
        <button ng-click="postForm()" type="submit">Submit</button>
        </a>
    </div>
    <p>{{bean}}</p>
</form>
<a href="#dashBoard">Back To DashBoard</a>
</div>

submitCase.html 

<div id="flat" ng-controller = "flatCtrl" >
    {{homeService.get();}}
<a href="#dashBoard">Back To DashBoard</a>
</div>

这里我正在尝试做路由以及表单提交。 从dashboard页面到cratecase页面获取根目录后，我将表单详细信息提交给服务器，并再次从服务器获取JSON对象，我想显示submitCase页面。 在home.jsp我用homeApp模块引导角度。 在从仪表板路由到createcase之后我又添加了一个应用程序flatApp但是submitCase页面也有相同的应用程序和控制器仍然我无法在submitCase页面填充homeService中设置为bean对象的值。我在哪里弄错了？如何将submitCase页面带到当前作用域，即createCase页面，因为我能够在表单提交后在createCase页面上打印该bean对象请帮助

0 个答案:

没有答案
相关问题
最新问题