0

I am creating a leaving cert points calculator, which is a SPA website, where the user ticks a checkbox if they have taken the subject and enters in the grade they received and the level at which they took it.

I have the interface fully implemented as well as all the calculation functions but I'm struggling to find an easy way to add subjects to a new array (called takenSubjects) based on whether or not the checkbox is ticked.

This is what the interface looks like so far.

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

I want to take in the grade as a string (which then converts to the correct amount of points). I will also need to take in the level (radio buttons) which will also help calculate the points. And finally the taken (checkbox) boolean which will decide whether or not to add the subject to the array to be calculated into the total points.

I don't have a huge amount of experience of angularJS experience but I'm using a factory to hold my functions. Here is the Javascript I have thus far.

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();
    });
9
  • You will need to attach a model to the checkbox view. Have you done that?
    – raneshu
    Jan 4, 2015 at 23:41
  • You might need to add the array to the scope of the controller Jan 4, 2015 at 23:41
  • Add an array to the controller that you use when calling your service methods, i.e. Factories, from the controller to calculate stuff. Inspiration Jan 4, 2015 at 23:52
  • @raneshu What do you mean attach a model, it's only a single view for the page. I was mainly using angularjs for the modularity of it all. Jan 4, 2015 at 23:52
  • He probably refers to a Ngmodel Jan 4, 2015 at 23:57

2 Answers 2

0

You should have built your list of subjects in the html view using ng-repeat. and your checboxes using an ng-model (that you set on initialization) and some

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

Then in the controller you have the method setTaken that can pass taken or not taken for the subject to the factory. (you should also implement a getter for initialization using hour getTaken method that updates the value of the ng-model, ng-model="subject.taken[$index])

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

And in the factory a method that sets/stores something to a backend or other type of storage, so that your getter can get it.

0

It is probably better if you change your application architecture. That is, change the factory and add more to the controller. I will give you some pointers, but not the code to the entire app. You will need to figure that out yourself.

Here are some steps you may want to follow: 1) Add var takenSubjects =[]; to the beginning of your factory. This is the array that would hold subjects that you have taken.

2) Include a function in your factory to allow you to add an object with subject details to your array. The function should look like this:

    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) Now you can attach models to all the fields in your html. Here is an example of how to add a model to the checkbox field. It's easy -

To know if the checkbox has been checked, you will need to attach a model to the check box - in the view(html). Remember, your factory cannot interact with the view, so your controller will need to grab the checkbox state (true if checked. false if unchecked) and then you can assign it to SimpleFactory.addTakenSubject(subject)

So, for example,your html should look like:

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

Likewise, for the level (higher,ordinary, foundation), your html would look like:

Remember - you will probably use ng-repeat to list you html

------You can do the rest - basically add the html for the remaining input fields. You've probably already done it!

- 4)Next, you would need to add a function to your controller that grabs the value of taken(which will be either true or false) and assigns it to an instance variable in your factory.

So like:

   .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
        });
      });

Remember - your ng-model should be the same as the object key in the controller.

And that's pretty much where you would start. You don't need to follow this entirely. But it should help!

One word of caution is: make sure your syntax for defining a factor is valid. Here's how I would define a factory:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.