Question

我目前正在显示问题，根据您选择的答案，问题得分显示在右侧。这有效，但我无法弄清楚如何自动更新SubTotal。尝试在选择下拉菜单上进行ng-change，但它似乎不起作用。我orignaly试图以某种方式将子总数绑定到ng模型，但不确定如何最好地做到这一点。现在我正在尝试使用ng-change调用“optionChange”来更新值，但它没有在UI中更新或触发警报。

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>

控制器

（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');
    };

Answer 1

在这种情况下，不需要$ watch。为了防止有人想玩这个，这里有一个jsFiddle，它解决了上面代码中JSON的一些问题并且工作得很好：

http://jsfiddle.net/BHA9C/

我选择将对总和值的引用更改为实际函数，该函数计算它并返回求和值：

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

我添加了进行求和的函数：

$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;
};

Answer 2

如果您在optionChange更改时尝试致电question.selectedOption，请在您的控制器中尝试：

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

尽我所能了解你的问题。

我还假设vm已附加到您的控制器$scope。代码片段没有说清楚。

祝你好运！

Answer 3

问题解决了。太荒谬了。

不得不改变

data-ng-change="vm.optionChange"

到

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

Angular试图动态添加总计，目前无法正常工作

3 个答案: