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视图中构建主题列表。和你的checbox使用ng模型（你在初始化时设置）和一些

<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，它可以传递或不传递主体到工厂。（您还应该使用小时getTaken方法实现初始化的getter，以更新ng-model的值ng-model="subject.taken[$index]）

$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）接下来，您需要向控制器添加一个函数，该函数获取take的值（将为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模型应该与控制器中的对象键相同。

这就是你要开始的地方。 你不需要完全遵循这一点。但它应该有所帮助！

需要注意的一点是：确保您定义因子的语法有效。这是我如何定义工厂：

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

将主题添加到列表中

2 个答案: