Question

我的javascript代码很像这个小提琴：http://jsfiddle.net/nj4N4/7/

在我的页面上，它看起来像这样：image。当你点击＆＃34;添加一年＆＃34;按钮，一个看起来像year2的表格在上一年之后突然出现。

我现在希望将其保存在数据库中，这样当您更新页面时，登录的特定用户仍然显示与他/她更新站点（或注销）之前相同的年数。我的问题是如何做到这一点，以及从哪里开始。我正在使用平均堆栈（mongodb，node，express，angular）。

我创建了一个名为year的数据库，当你点击＆＃34;添加一年＆＃34;按钮它在该数据库中添加了新的一年，但它现在只有一个Id。这是代码：

HTML：

<div class="row">
        <button class="btn btn-default addyear"  ng-click="vm.addYear();" onclick="add_fields();">Add a year</button><br><br><br>
        <div class="row" >
            <div id="year6"></div>
            <div id="year5"></div>
            <div id="year4"></div>
            <div id="year3"></div>
            <div id="year2"></div>
            <div class="panel panel-default" >
                <div class="panel-heading "><B>  YEAR 1</B>
                    <a href="#" class= "show" id="hide" >Show less</a>

                </div>
                <div class="panel-body hideyear1 " >
                    <div class="col-xs-6">
                        <table class="table table-striped">
                            <tr >
                                <td><b>Course code</b></td>
                                <td><b>Course name</b></td>
                                <td><b>Block</b></td>
                                <td><b>Level</b></td>
                                <td><b>HP</b></td>
                            </tr>
                            <tr>
                                <td>TDDD27</td>
                                <td>Webprog</td>
                                <td>1</td>
                                <td>A</td>
                                <td>6</td>
                            </tr>
                            <tr>
                                <td>TEIE06</td>
                                <td>IFP</td>
                                <td>4</td>
                                <td>A</td>
                                <td>6</td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-xs-6">
                        <table class="table table-striped">
                            <tr>
                                <td><b>Course code</b></td>
                                <td><b>Course name</b></td>
                                <td><b>Block</b></td>
                                <td><b>Level</b></td>
                                <td><b>HP</b></td>
                            </tr>
                        </table>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

JavaScript：

<script>

    var year = 1;
    var limit = 7;
    function add_fields() {
        year++;
        if (year == limit)  {
            exit;
        }

        else {
                var newdiv = document.createElement('div');



        if(year==2) {
                newdiv.innerHTML = '<div class="panel panel-default" ><div class="panel-heading "><B>YEAR '  +year+'</B> <a href="#" class= "show" id="hide">Show less</a> </div> <div class="panel-body hideyear1 "> <div class="col-xs-6"> <table class="table table-striped"> <tr > <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr>  </table> </div> <div class="col-xs-6"> <table class="table table-striped"> <tr> <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> </table> </div> </div> </div> </div> </div> ';;
                document.getElementById('year2').appendChild(newdiv);

            }
            if(year==3) {
                newdiv.innerHTML = '<div class="panel panel-default" ><div class="panel-heading "><B>YEAR '  +year+'</B> <a href="#" class= "show" id="hide" >Show less</a> </div> <div class="panel-body hideyear1 " > <div class="col-xs-6"> <table class="table table-striped"> <tr > <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr></table> </div> <div class="col-xs-6"> <table class="table table-striped"> <tr> <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> </table> </div> </div> </div> </div> </div> ';;
                document.getElementById('year3').appendChild(newdiv);

        }
            if(year==4) {
                newdiv.innerHTML = '<div class="panel panel-default" ><div class="panel-heading "><B>YEAR '  +year+'</B> <a href="#" class= "show" id="hide" >Show less</a> </div> <div class="panel-body hideyear1 " > <div class="col-xs-6"> <table class="table table-striped"> <tr > <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> </table> </div> <div class="col-xs-6"> <table class="table table-striped"> <tr> <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> </table> </div> </div> </div> </div> </div> ';;
                document.getElementById('year4').appendChild(newdiv);

            }
            if(year==5) {
                newdiv.innerHTML = '<div class="panel panel-default" ><div class="panel-heading "><B>YEAR '  +year+'</B> <a href="#" class= "show" id="hide" >Show less</a> </div> <div class="panel-body hideyear1 " > <div class="col-xs-6"> <table class="table table-striped"> <tr > <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> <tr> </table> </div> <div class="col-xs-6"> <table class="table table-striped"> <tr> <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> </table> </div> </div> </div> </div> </div> ';;
                document.getElementById('year5').appendChild(newdiv);

            }
            if(year==6) {
                newdiv.innerHTML = '<div class="panel panel-default" ><div class="panel-heading "><B>YEAR '  +year+'</B> <a href="#" class= "show" id="hide" >Show less</a> </div> <div class="panel-body hideyear1 "> <div class="col-xs-6"> <table class="table table-striped"> <tr > <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> <tr> </table> </div> <div class="col-xs-6"> <table class="table table-striped"> <tr> <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> </table> </div> </div> </div> </div> </div> ';;
                document.getElementById('year6').appendChild(newdiv);
                $(".addyear").hide();

index.controller ：

(function () {

    'use strict';

    angular
        .module('app')
        .controller('Home.IndexController', Controller);

    function Controller(UserService, YearService, FlashService) {
        var vm = this;

        vm.user = null;
        vm.addYear = addYear;

        initController();

        function initController() {
            UserService.GetCurrent().then(function (user) {
                vm.user = user;
            });
        }

        function addYear() {
            YearService.Create()
                .then(function () {
                    FlashService.Success('Year saved!');
                })
                .catch(function (error) {
                    FlashService.Error(error);
                });

        }


    }

})();

year.service.js

(function () {
    'use strict';

    angular
        .module('app')
        .factory('YearService', Service);

    function Service($http, $q){
        var service =  {};

        service.Create = Create;
        return service;

        function Create() {
            return $http.post('/api/year').then(handleSuccess, handleError);
        }

API / year.controller

var YearService = require('services/year.service');

router.post('/', createYear);
module.exports = router;

function createYear(req, res){
   YearService.create(req.body)
        .then(function(){
            res.sendStatus(200);
        })
        .catch(function(err) {
            res.status(400).send(err);
        });
}

服务/ year.service

var db = mongo.db(connectionString, { native_parser: true });
db.bind('years');

var service = {};
service.create = create;


module.exports = service;

function create(yearParam) {
    var deferred = Q.defer();
    createYear();

    function createYear() {
        var year = yearParam;
        db.years.insert(
            year,
            function (err, doc) {
                if (err) deferred.reject(err);

                deferred.resolve();
            });


    }

    return deferred.promise;

}

对不起，如果这是代码太多，但由于我不知道从哪里开始或如何做到这一点，我也不知道哪些代码是相关的。

Answer 1

好的，你需要将关注点与Angular方式区分开来看起来你只是在利用Angular的$ http资源请求，你可以用很少的努力生成整个表。

你应该拥有的目标是构建一个嵌套数组的对象（我们称之为模型），它将保存每年的数据，这些数据可以很容易地转换为JSON或返回到javascript对象。

可以容纳您需要的所有信息的结构。拥有这样的模型，您可以开始构建您的视觉元素。基于这个模型。要添加另一年，您只需将一组变量推送到此模型上，您的表格和可视元素将通过ng-repeat和ng-model指令自动更新。

由于操作模型要容易得多，因此您可以专注于视觉元素和样式，而不是试图记住是否复制了所有表格元素，或者是否缺少会破坏页面的标记。

最后，可以在$ http资源请求中直接使用这样的模型而无需任何转换来更新数据库。 JSON转换会自动发生。

你不需要YearService，year.service，createyear deffered callbacks，或者大量的javascript add_fields函数。

您可以将整个应用简化为两个文件：index.html和app.js. 保持获取并将数据保存在主app控制器中作为$ scope函数，可以直接从页面上的按钮调用。

摆脱服务和工厂，只需编写一个函数saveModel（）;和getModel（）;并添加一年addYear（）来操纵模型。

最后，在你的html主体中，你只需要一个包含一行标题的表，并且这些行是从ng-repeat生成的。用年份包装这个表格，你也可以在年级顶级数组上重复这几年。

你的数组看起来像这样：

[ "2000" : [{ course : "code", coursename : "webprog", block : "1"},
            { course : "code1", coursename : "webprog1", block : "2"}],
"2001" : [{ course : "code", coursename : "webprog", block : "1"},
            { course : "code1", coursename : "webprog1", block : "2"}]
]

如何在特定用户

1 个答案: