将主题添加到已拍摄列表

Question

我正在创建一个毕业证书积分计算器，它是一个 SPA 网站，用户在该网站上勾选一个复选框，如果他们已经参加了该科目并输入他们获得的成绩和他们参加该课程的级别。

我已经完全实现了界面以及所有计算功能，但我正在努力寻找一种简单的方法来根据复选框是否被勾选来将主题添加到新数组（称为 takeSubjects）。

这是目前界面的样子。

http://i62.tinypic.com/28rjg2d.png

我想将成绩作为一个字符串（然后转换为正确的分数）。我还需要考虑级别（单选按钮），这也将有助于计算分数。最后是采取（复选框）布尔值，它将决定是否将主题添加到要计算到总分的数组中。

我没有大量的 angularJS 经验，但我正在使用工厂来保存我的功能。这是我到目前为止的Javascript。

factory.getSubjects = function () {
            return subjects;
        };
    /*  
        factory.getTakenSubjects = function () {
            return 
        };

        factory.getGrade = function () {
            scope.subjects.push(
            {
                grade: $scope.newGrade.grade;
            });
        }

        factory.total = function (subjects, levels,grades) {
            var total=0;
            for(var i=0;i<subjects.length;i++){
                total+=gradeToPoints(subjects[i],levels[i],grades[i]);
            }
            return total;
        };

        factory.gradeToPoints= function(subject,level,grade){
            var results = 0;
            if(level==="Higher"){
                results = higherGradeToPoints(grade);
                if (subject === "Mathematics" && results>0){//if the subject is maths and they have gotten points then add 25 more to it
                    results += 25;
                }
            }else if(level==="Lower"){
                results = lowerGradeToPoints(grade);
            }else{//level is foundation
                if(subject === "Mathematics" || subject === "Irish"){//only two subject allow for this option so check it.
                    results = foundGradeToPoints(grade);
                }
            }
            return results;
        };      

        factory.foundationGradeToPoints = function (grade) {
            switch (grade){
                case "A1":
                    return 20;  
                case "A2":
                    return 15;
                case "B1":
                    return 10;
                case "B2":
                    return 5;
            }   
            return 0;   
        };

        factory.lowerGradeToPoints = function (grade) {
            switch (grade){
                case "A1":
                    return 60;

                case "A2":
                    return 50;

                case "B1":
                    return 45;      

                case "B2":
                    return 40;      

                case "B3":
                    return 35;

                case "C1":
                    return 30;

                case "C2":
                    return 25;

                case "C3":
                    return 20;

                case "D1":
                    return 15;

                case "D2":
                    return 10;

                case "D3":
                    return 5;   
            }
            return 0;
        };

        factory.higherGradeToPoints = function (grade) {
            switch (grade){
                case "A1":
                    return  100;

                case "A2":
                    return  90;

                case "B1":
                    return  85;

                case "B2":
                    return  80;

                case "B3":
                    return  75;

                case "C1":
                    return  70;

                case "C2":
                    return  65;

                case "C3":
                    return  60;

                case "D1":
                    return  55;

                case "D2":
                    return  50;

                case "D3":
                    return  45;
            }
            return 0;
        };
        */
        return factory;
    })

    .controller('SimpleController', function($scope, simpleFactory) {
            $scope.subjects = simpleFactory.getSubjects();
    });

Answer 1

您应该已经使用 ng-repeat 在 html 视图中构建了主题列表。 以及使用 ng-model（在初始化时设置）和一些

的复选框

<div ng-controller="myCtrl1">
  <div ng-repeat="subject in subjects track by $index">
    <input type="checkbox" ng-model="subject.taken[$index] ng-change="setTaken(subject, $index, value)""/>
    <span>{{subject.name}}</span>
  </div>
</div>

然后在控制器中，您有方法 setTaken 可以将主题传递给工厂，也可以不采取。 （您还应该使用更新 ng-model ng-model="subject.taken[$index] 的值的 hour getTaken 方法实现一个 getter 进行初始化）

$scope.setTaken= function(subject,$index, value){
   simpleFactory.setTaken(subject,value);
}

并且在工厂中设置/存储某些东西到后端或其他类型的存储的方法，以便您的 getter 可以获取它。

Answer 2

如果您更改应用程序架构可能会更好。 也就是改厂，给控制器增加更多。 我会给你一些指示，但不是整个应用程序的代码。你需要自己弄清楚。

以下是您可能需要遵循的一些步骤： 1）将var takenSubjects =[];添加到您工厂的开头。这是一个数组，可以保存你所学的科目。

2) 在您的工厂中包含一个函数，允许您将具有主题详细信息的对象添加到您的数组中。该函数应如下所示：

    factory.addTakenSubject = function(subject) {
        takenSubjects.push(subject);
    };]

    //The objects you will be adding would be like this:  - but don't worry about the object right now.
  {
    subject: 'Accounting,
    taken: true, //or false..whichever
    level: "ordinary"
    gradeReceived: "A"
  }

3) 现在您可以将模型附加到 html 中的所有字段。 这是一个如何将模型添加到复选框字段的示例。这很容易 -

要知道复选框是否已被选中，您需要将模型附加到复选框 - 在视图（html）中。请记住，您的工厂无法与视图交互，因此您的控制器需要获取复选框状态（如果选中则为 true。如果未选中则为 false），然后您可以将其分配给 SimpleFactory.addTakenSubject(subject)

因此，例如，您的 html 应如下所示：

   <input type="checkbox" ng-model="subject.taken"> //must be in scope of SimpleController

同样，对于级别（更高、普通、基础），您的 html 将如下所示：

记住 - 你可能会使用 ng-repeat 来列出你的 html

------你可以做其余的 - 基本上为剩余的输入字段添加 html。您可能已经完成了！

- 4)接下来，您需要在控制器中添加一个函数，该函数获取taken 的值（为真或假）并将其分配给工厂中的实例变量。

比如：

   .controller('SimpleController', function($scope, simpleFactory) {
        $scope.subject={subject:"", taken:false, level:"", gradeReceived:""};//taken is defaulted to false
        $scope.add = function() {
        simpleFactory.addTakenSubject($scope.subject);//$scope.subject will no
        });
      });

请记住 - 您的 ng-model 应该与控制器中的对象键相同。

这几乎就是你要开始的地方。 你不需要完全遵循这个。但这应该会有所帮助！

请注意：确保定义因子的语法有效。这是我定义工厂的方式：

     var app = angular.module('myApp', []);
     app.factory('myFactory', [function(){
        var takenSubjects = [];
        return{
           addTakenSubject: function() {
               takenSubjects.push(subject);
           }
         }
   }]);
  //this is only one function. You can add more key value pairs in the return object.
  //**remember - factories return objects**