将主题添加到拍摄列表

Question

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

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

这是目前界面的样子。

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 值的 hour getTaken 方法实现 getter 初始化，ng-model="subject.taken[$index]）

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

并且在工厂中有一个方法 sets/stores 一些东西到后端或其他类型的存储，这样你的 getter 就可以得到它。

Answer 2

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

以下是您可能需要执行的一些步骤： 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 的值（为 true 或 false）并将其分配给工厂中的实例变量。

很喜欢：

   .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**

将主题添加到拍摄列表

Adding subjects to a taken list

javascript

checkbox

user-input

twitter-bootstrap

angularjs