如何使用AngularJS

时间:2017-09-06 13:17:58

标签: javascript html angularjs

我正在尝试为产品列表创建一个重量计算器。但是,我有计算和显示总和的问题。

我遇到问题,我在底部调用函数GeneralTotalWeight()。我认为它不会被触发。

这是html的截图。我用黄色标记了标签。

enter image description here

这是html。

<tbody>
    <tr ng-repeat="article in articles">
        <td>
            <input type="text" ng-model="article.size" class="form-control" placeholder="Ölçü" min=0 disabled>
        </td>
        <td>
            <input type="text" ng-model="article.name" class="form-control" placeholder="Ürün" min=0 disabled>
        </td>
        <td>
            <input type="number" ng-model="article.quantity" class="form-control bfh-number" step=1>
        </td>
        <td>
            <label ng-model="article.meter" class="form-control bfh-number" style="width:150px" disabled>
                {{article.quantity*6}}
            </label>
        </td>
        <td>
            <input type="number" ng-model="article.weight" class="form-control bfh-number" min=0 disabled>
        </td>
        <td>
            @*<input type="number" ng-model="article.totalWeight" class="form-control bfh-number" min=0 disabled>*@
            <label ng-model="article.totalWeight" class="form-control bfh-number" style="width:150px" disabled>
                {{article.quantity*6*article.weight}}
            </label>
        </td>
    </tr>
    <tr class="success">
        <td class="success">TOPLAM</td>
        <td class="success"></td>
        <td ng-model="article.totalQuantityX" class="success">{{ GeneralTotalQuantity() }} Boy</td>
        <td class="success">{{ GeneralTotalMeter() }} metre</td>
        <td class="success"></td>
        <td ng-model="article.totalWeightX" class="success">{{ GeneralTotalWeight() | number:2 }} KG</td>
    </tr>
</tbody>

代码如下......

$scope.GeneralTotalWeight = function () {
    var resultWeight = 0;

    angular.forEach($scope.articles, function (article) {
        resultWeight += article.totalWeight * article.meter;
    });
    return resultWeight;
};

如何修复此错误?提前谢谢。

1 个答案:

答案 0 :(得分:1)

你不应该同时使用表达式和ng-model。从中删除ng-model。并直接在您的函数中传递文章

 <td class="success">{{ GeneralTotalWeight(articles) | number:2 }} KG</td>

和功能应该像

$scope.GeneralTotalWeight = function (articles) {
    var resultWeight = 0;

    angular.forEach(articles, function (article) {
        resultWeight += article.totalWeight * article.meter;
    });
    return resultWeight;
};