使用AngularJS将表单数据数组保存到上一个数组

时间:2015-11-12 14:17:45

标签: javascript arrays angularjs

我的script.js中有一个数组,例如:

 $scope.companies = [
        {
            id: '1',
            contact: 'John',
            address: 'Some street, United States',
            function: 'Client',
            telephone: '0123455858446',
            fax: '0128289385',
            url: 'http://www.example.com'
        },

    ];

然后有一个表单向数组添加一个新项目 - 一旦提交表单,它就会创建自己的数组项,然后将其“推送”到旧数组。

然后console.log打印出已完成的数组,它包含所有数据。

但是,如果我然后浏览到另一个页面,它在表格中显示数据,它不会显示它 - 并且它没有将数组项目添加到script.js。

我该怎么做?

的script.js:

    // Define a new module for our app
var app = angular.module("myApp", ['ngRoute', 'UserApp']);
var appName = 'My App';

// Config the route
app.config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider.
        when('/', {
            templateUrl: 'dashboard.html',
            controller: 'DashboardController',
            public: false
        }).
        when('/companies', {
            templateUrl: 'companies.html',
            controller: 'CompaniesController',
            public: false
        }).
        when('/companies/add', {
            templateUrl: 'add-company.html',
            controller: 'CompaniesController',
            public: false
        }).
        when('/login', {
            templateUrl: 'login.html',
            controller: 'LoginController',
            login: true
        }).
        when('/management/create-user', {
            templateUrl: 'management/create-user.html',
            public: false
        }).
        when('/account/edit/:userid', {
            templateUrl: 'account/edit.html',
            controller: 'EditAccountController',
            public: false
        }).
        when('/profile/:userid', {
            templateUrl: 'account/profile.html',
            controller: 'ProfileController',
            public: false
        }).
        otherwise({
            templateUrl: '404.html'
        });
        $locationProvider.html5Mode(true);
    }]);

app.run(function(user) {
    user.init({ appId: 'REMOVED' });
});

app.controller("DashboardController", function($scope) {
    $scope.title = 'Dashboard';
});

app.controller("CompaniesController", ['$scope', function($scope) {
    $scope.title = 'Companies';
    $scope.title_sub = 'Add Company';

    $scope.add = function(newCompany) {
        $scope.companyData = [
            {
                id: newCompany.id,
                primary_contact: newCompany.primary_contact,
                address: newCompany.address,
                function: newCompany.function,
                telephone: newCompany.phone,
                fax: newCompany.fax,
                url: newCompany.url
            }
            ];
        console.log(newCompany);
        console.log($scope.companyData);
        console.log($scope.companies);
        $scope.companies.push.apply($scope.companies, $scope.companyData);
    };

    $scope.companies = [
        {
            id: '1',
            contact: 'John',
            address: 'Some street, United States',
            function: 'Client',
            telephone: '0123455858446',
            fax: '0128289385',
            url: 'http://www.example.com'
        },
    ];
}]);

app.controller('GlobalController', ['$scope', function($scope) {
        $scope.appName = "My App";
    }]);

app.controller("LoginController", function($scope) {
    $scope.title = 'Login';
});

app.controller('EditAccountController', ['$scope' ,'$routeParams', function($scope, $routeParams) {
    $scope.title = 'Edit Account';
    $scope.update = function(userAccount) {
        UserApp.User.save({
            "user_id": $routeParams.userid,
            "first_name": userAccount.first_name,
            "last_name": userAccount.last_name,
            "email": userAccount.email,
            "properties": {
                "phone": userAccount.phone
            }
        }, function (error, result) {
            if (result) {
                $scope.$apply(function () {
                    $scope.saveUser = 'Your account has been updated.';
                })
            } else if (error) {
                $scope.saveUser = "Something went wrong. Please try again!";
            }
            else {
                $scope.saveUser = "Something went wrong. Please try again!";
            }
        });
    }
}]);

app.controller('ProfileController', ['$scope', '$routeParams',  function($scope, $routeParams) {
    $scope.title = 'Profile';
    UserApp.User.get({
        "user_id": $routeParams.userid
    }, function(error, result){
        // Handle error/result
        if (result) {
            $scope.$apply(function(

            ) {
                $scope.getUser = result[0]
            })
        } else if (error) {
            $scope.getUser = error
        }
    });
}]);

添加-company.html:

<div class="row">
    <div class="col-md-12">
        <h1>{{ title_sub }}</h1>
    </div>

</div>

<div class="row">
    <div class="col-md-12">
        <p>Add a new company.</p>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <form>
            <div class="form-group">
                <label>ID</label><input type="text" name="id" id="id" ng-model="newCompany.id" tabindex="1" class="form-control">
                <label>Primary Contact</label><input type="text" name="primary_contact" id="primary_contact" tabindex="2" ng-model="newCompany.primary_contact" class="form-control">
                <label>Address</label><input type="text" name="address" id="address" tabindex="2" ng-model="newCompany.address" class="form-control">
                <label>Function</label><input type="text" name="function" id="function" tabindex="2" ng-model="newCompany.function" class="form-control">
                <label>Telephone</label><input type="text" name="telephone" id="telephone" tabindex="2" ng-model="newCompany.phone" class="form-control">
                <label>Fax</label><input type="text" name="fax" id="fax" tabindex="2" ng-model="newCompany.fax" class="form-control">
                <label>URL</label></lab><input type="text" name="url" id="url" tabindex="2" ng-model="newCompany.url" class="form-control">
            </div>
            <div class="form-group">
                <div class="row">
                    <div class="col-sm-6 col-sm-offset-3">
                        <input type="submit" name="add-submit" id="add-submit" tabindex="10" ng-click="add(newCompany)" class="form-control btn btn-primary" value="Add Company">
                        <br>
                        <div class="text-center">
                            <p ng-show="addCompany"><span class="label label-info">{{ addCompany }}</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

编辑:新控件:

app.controller("CompaniesController", ['$scope', 'companyService', function($scope, companyService) {
    $scope.title = 'Companies';
    $scope.title_sub = 'Add Company';

   $scope.add = function(newCompany) {
       companyService.addCompany( {
           id: newCompany.id,
           primary_contact: newCompany.primary_contact,
           address: newCompany.address,
           function: newCompany.function,
           telephone: newCompany.phone,
           fax: newCompany.fax,
           url: newCompany.url
       });
    };

    $scope.companies = companyService.getCompanies();

}]);

3 个答案:

答案 0 :(得分:1)

使用服务的示例,您必须在每个控制器中“注入”服务,就像我在EditAccountController中做的那样

app.service('companyService',[function(){
     var companies = [];
     return {
         addCompany: function(company){
            companies.push(company);
         },
         getCompanies: function(){ 
               return companies;
         }
     }
}]);

app.controller('EditAccountController', ['$scope', 'companyService', function($scope, companyService){

 $scope.companies = companyService.getCompanies();
}]);

答案 1 :(得分:0)

您是指在提交数据并将其保存到阵列后浏览到其他页面?

如果您转到另一个页面,您将丢失Javascript在上一页中的内存,为了保存数据,您可以使用sessionStorage或localStorage

单向可能是这个

$scope.origData = [];

$scope.addData = function(data){
 $scope.origData.push(data);
 localStorage.setItem('storedData', $scope.origData);
}

我在这里使用原生的javascript localStorage对象来访问数据库,但是有一个模块以角度方式ngStorage处理存储(阅读相关内容)

使用本机localStorage对象,您将能够使用此对象访问项目中任何页面中的数据。

$scope.dataOnPreviousPage = localStorage.getItem('storedData')

答案 2 :(得分:0)

如何将数组放入$ rootScope?

 $rootScope.companies = [
        {
            id: '1',
            contact: 'John',
            address: 'Some street, United States',
            function: 'Client',
            telephone: '0123455858446',
            fax: '0128289385',
            url: 'http://www.example.com'
        },

    ];