CODEWITHSUNDEEP
angularjs
Mastro
Mastro

Reputation: 1497

Angular trying to add totals on the fly, not currently working

I'm currently displaying questions and based on your selected answer the question score shows up on the right. That works but what I can't figure out is how to auto-update the SubTotal. Trying an ng-change on the select drop down but it doesn't seem to work. I orignaly tried to somehow bind sub-total to a ng-model but wasn't sure how best to do that. Right now I'm trying to use a call on ng-change to "optionChange" to update the value but it's not updating in the UI or firing off the alert.

HTML

<td class="control-label input-lg">{{question.title}}</td>
    <td>
        <select data-ng-model="question.selectedOption" data-ng-change="vm.optionChange"
                ng-options="option.name for option in question.options" class="form-control input-lg">
        </select>
    </td>
    <td><span class="input-lg">{{question.selectedOption.value}}</span></td>
</tr>
<tr>
    <td class="control-label input-lg">Sub-Total</td>
    <td></td>
    <td><span class="input-lg">{{vm.sections[0].subTotal}}</span></td>
</tr>

Controller

(function () { 'use strict';

var controllerId = 'default';

// TODO: replace app with your module name
angular.module('scoreCard').controller(controllerId,
    ['$scope', controller1]);

function controller1($scope) {
    var vm = this;
    vm.questions = [
        {
            title: "Question 1",
            section: 1,
            options: [
                { name: "Option 1", value: 5 },
                { name: "Option 2", value: 2.5 },
                { name: "Option 3: 0 }
            ],
            selectedOption: {name:"", value:0}
        },
        {
            title: "Question 2",
            section: 1,
            options: [
                { name: "Option 1", value: 5 },
                { name: "Option 2", value: 2.5 },
                { name: "Option 3: 0 }
            ],
            selectedOption: { name: "", value: 0 }
        }
    ];

    vm.sections = [
        { name: "section1", subTotal: 0 },
        { name: "section2", subTotal: 0 }

    ];

    vm.optionChange = function () {
        vm.sections[0].subTotal = vm.questions[0].selectedOption.value + vm.questions[1].selectedOption.value;
    alert('test');
    };

Upvotes: 0

Views: 71

Answers (3)

John Munsch
John Munsch

Reputation: 19528

$watches are not needed in this case. Just in case somebody wants to play with this some, here's a jsFiddle for it which fixes some issues with the JSON in the code above and works pretty well:

http://jsfiddle.net/BHA9C/

I chose to change the reference to the summed value to an actual function which calculates it and returns the summed value:

 <td><span class="input-lg">{{ subTotalForSection(0) }}</span></td>

And I put added the function which does the summing:

$scope.subTotalForSection = function (section) {
    // Save off the value (presumably for later use).
    $scope.sections[section].subTotal = $scope.questions[0].selectedOption.value + $scope.questions[1].selectedOption.value;

    // Return it for display.
    return $scope.sections[section].subTotal;
};

Upvotes: 2

Mastro
Mastro

Reputation: 1497

Problem solved. So ridiculous.

Had to change

data-ng-change="vm.optionChange"

to

data-ng-change="vm.optionChange()"

Upvotes: 1

Brandon Silva
Brandon Silva

Reputation: 446

If your trying to call optionChange when question.selectedOption changes, try this within your controller:

$scope.$watch('question.selectedOption', vm.optionChange);

Tried my best to understand your question.

I'm also assuming vm is attached to your controller $scope. The code snippet doesn't make that clear.

Good luck!

Upvotes: 1

Related Questions