Angular.Js用其他3个输入的总和动态更新一个输入

沃尔夫克斯

我有一个包含6行4列的表(第四列是合计:应为以上3列的总和)。基本上我想做的是计算每一列的总和并在第四列中显示总数。我的表是使用ng-repeat生成的。

就像是:

<table>
    <thead>
      <tr>
        <th ng-repeat="item in items">{{item}}</th>
      </tr>
    </thead>

        <tbody>
          <tr>
            <td>Input1:</td>
            <td ng-repeat="collection in collections">
             <input type="text" ng-model="collection.row1">
            </td>
          </tr>
          <tr>
            <td>Input2:</td>
            <td ng-repeat="collection in collections">
             <input type="text" ng-model="collection.row2">
            </td>
          </tr>
          <tr>
            <td>Input3:</td>
            <td ng-repeat="collection in collections">
             <input type="text" ng-model="collection.row3">
            </td>
          </tr>
          <tr>
            <td>Sum:</td>
            <td ng-repeat="collection in collections" ng-model="collection.total">
             {{collection.total}}
            </td>
          </tr>
       </tbody>
    </table>

来自ng-repeat的“集合”将是一个包含6个对象的数组,这些对象是我使用GET方法从API获取并将数据存储在$ scope中的。

带有ng-model的“总计”行来自已经进行了演算的后端,但是我需要一种在客户端上显示它的方法,因为它正在动态更新。

我试过$ watch和$ watchCollection以及ng-change,但是我找不到使它工作的方法。在控制器中,我使用了for来遍历对象数组,并尝试对每个[i]位置求和,但这没有用。

我的问题还有其他解决方案吗?

这是我在控制器中尝试过的方法:

$scope.collections = [];

$scope.getTotal = function(){
    var total = 0;
    for(var i = 0; i < $scope.collections[i].length; i++){
        var myItems= $scope.collections[i];
        total = (myItems.row1+ myItems.row2+ myItems.row3);
    }
    return total;
};

谢谢你。

J-迪兹勒

为什么不简单地在模板中这样做呢?

<td>{{collection.row1 + collection.row2 + collection.row3}}</td>

另外,除非是,否则不应存在ng-model <input>那可能就是您的主要错误所在。Ng-model会尝试在的内设置值<td>,因此,角度模板({{X}})和ng-model会<td></td>在给定代码中竞争内的显示值

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Angular JS-当一个输入在ng-view内而另一输入在ng-include内时更新ng-model

来自分类Dev

Angular JS-使用其他输入选项更新输入选项

来自分类Dev

如何使用Angular JS将一个模型绑定到多个输入

来自分类Dev

如何在angular js指令中启用第一个输入焦点

来自分类Dev

Angular.js:如何将数据从一个HTML更新为使用相同控制器的其他HTML

来自分类Dev

当一个输入在Angular 4或Angular 6中聚焦时,我想隐藏一个div

来自分类Dev

将鼠标悬停在Angular JS的一个元素上并将addClass添加到其他elem

来自分类Dev

将鼠标悬停在Angular JS的一个元素上并将addClass添加到其他elem

来自分类Dev

如何在Angular JS应用程序中将一个分区包括到其他页面?

来自分类Dev

Angular.js-使用一个属性预填充输入,但是将ng-model设置为不同的属性

来自分类Dev

填写其他输入时,禁用一个输入

来自分类Dev

是否可以构建一个独立的Angular插件以嵌入其他角度站点?

来自分类Dev

如何在Angular中为一个属性分配其他属性

来自分类Dev

Angular2-创建一个可重用的,经过验证的文本输入组件

来自分类Dev

如何在Angular Material中的多个输入中使用一个指令?

来自分类Dev

根据 Angular 中的另一个文本字段更改输入值

来自分类Dev

如何将验证器附加到输入形式的angular中,以输入形式访问另一个模型

来自分类Dev

Angular js当达到最大字符长度时将焦点移至下一个输入字段,而当字符长度最小时将焦点移至上一个输入字段

来自分类Dev

Angular.js:动态更改输入类型

来自分类Dev

Angular JS动态输入和显示值

来自分类Dev

用JavaScript定义的Angular.js模型,需要将一个属性评估为一个函数

来自分类Dev

angular js中的单选按钮只选择第一个单选按钮没有选择其他单选按钮

来自分类Dev

使用 reactjs 在一个输入字段中输入禁用其他输入字段

来自分类Dev

Angular 6反应形式-如何根据另一输入的选择填充一个文本字段

来自分类Dev

Angular,用settimeout($ q)嘲笑一个诺言

来自分类Dev

如何使用 Angular 8 中的输入/输出将值从一个组件传输到另一个组件

来自分类Dev

Angular JS如何在另一个范围变量内更新范围变量

来自分类Dev

Angular ng-model组合框以及其他选项和一个文本框

来自分类Dev

保存动态用户输入-Angular

Related 相关文章

  1. 1

    Angular JS-当一个输入在ng-view内而另一输入在ng-include内时更新ng-model

  2. 2

    Angular JS-使用其他输入选项更新输入选项

  3. 3

    如何使用Angular JS将一个模型绑定到多个输入

  4. 4

    如何在angular js指令中启用第一个输入焦点

  5. 5

    Angular.js:如何将数据从一个HTML更新为使用相同控制器的其他HTML

  6. 6

    当一个输入在Angular 4或Angular 6中聚焦时,我想隐藏一个div

  7. 7

    将鼠标悬停在Angular JS的一个元素上并将addClass添加到其他elem

  8. 8

    将鼠标悬停在Angular JS的一个元素上并将addClass添加到其他elem

  9. 9

    如何在Angular JS应用程序中将一个分区包括到其他页面?

  10. 10

    Angular.js-使用一个属性预填充输入,但是将ng-model设置为不同的属性

  11. 11

    填写其他输入时,禁用一个输入

  12. 12

    是否可以构建一个独立的Angular插件以嵌入其他角度站点?

  13. 13

    如何在Angular中为一个属性分配其他属性

  14. 14

    Angular2-创建一个可重用的,经过验证的文本输入组件

  15. 15

    如何在Angular Material中的多个输入中使用一个指令?

  16. 16

    根据 Angular 中的另一个文本字段更改输入值

  17. 17

    如何将验证器附加到输入形式的angular中,以输入形式访问另一个模型

  18. 18

    Angular js当达到最大字符长度时将焦点移至下一个输入字段,而当字符长度最小时将焦点移至上一个输入字段

  19. 19

    Angular.js:动态更改输入类型

  20. 20

    Angular JS动态输入和显示值

  21. 21

    用JavaScript定义的Angular.js模型,需要将一个属性评估为一个函数

  22. 22

    angular js中的单选按钮只选择第一个单选按钮没有选择其他单选按钮

  23. 23

    使用 reactjs 在一个输入字段中输入禁用其他输入字段

  24. 24

    Angular 6反应形式-如何根据另一输入的选择填充一个文本字段

  25. 25

    Angular,用settimeout($ q)嘲笑一个诺言

  26. 26

    如何使用 Angular 8 中的输入/输出将值从一个组件传输到另一个组件

  27. 27

    Angular JS如何在另一个范围变量内更新范围变量

  28. 28

    Angular ng-model组合框以及其他选项和一个文本框

  29. 29

    保存动态用户输入-Angular

热门标签

归档