个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我是 angularjs 的新手，尝试创建一个非常简单的页面，在其中显示产品、价格、数量、小计(价格 * 数量)和总和。我希望，如果用户更新数量，则小计和总和应实时更新。我尝试过但无法得到它。尝试这样:
<body ng-app="myApp" ng-controller="myCtrl">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Price * Quantity</th>
</tr>
</thead>
<tbody ng-init="total = 0">
<tr ng-repeat="product in products">
<td>{{ product.name }}</td>
<td>{{ product.price }}</td>
<td><input value="{{ product.quantity }}"></td>
<td ng-init="$parent.total = $parent.total + (product.price * product.quantity)">${{ product.price * product.quantity }}</td>
</tr>
<tr>
<td><b>Total</b></td>
<td></td>
<td></td>
<td><b>${{ total }}</b></td>
</tr>
</tbody>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
var i = 0;
$scope.products = [
{
"name": "Product 1",
"quantity": 2,
"price": 10
},
{
"name": "Product 2",
"quantity": 6,
"price": 8
},
{
"name": "Product 3",
"quantity": 5,
"price": 26
},
{
"name": "Product 4",
"quantity": 10,
"price": 4
},
{
"name": "Product 5",
"quantity": 11,
"price": 7
}
];
});
</script>
</body>
这是我到目前为止的全部代码:http://plnkr.co/edit/QSxYbgjDjkuSH2s5JBPf?p=preview
提前致谢!
注意:这都是我想以 Angular 方式完成的事情，即仅在 HTML 中。该数据脚本将放入 .js 文件中
最佳答案
请参阅更新的链接http://plnkr.co/edit/HOCVZC2p3xfG2apoKJDW?p=preview您没有计算总数的函数。您需要添加它并在任何数量文本框发生变化时调用该函数。您还需要向数量的所有文本框添加更改事件 ng-change="updateTotal()"
$scope.updateTotal = function(){
$scope.total = 0;
angular.forEach($scope.products, function(product){
$scope.total += product.quantity*product.price;
});
};
关于javascript - Angular js : ng-repeat - how to update total sum of list created using ng-repeat?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45498832/
25
4
0
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 1
我有这段代码，我想在另一张工作表中查找一些单元格，如果它们符合条件，则将相邻单元格添加到返回到调用单元格函数的总数中。 Function collectUtfall(A1 As String, Ax
我知道默认的“CTRL+B”Windows 命令可用于显示所有嵌套文件。 是否有显示所有嵌套文件夹的快捷方式？ 最佳答案 我怀疑 Total Commander 中是否存在此功能。内置tree实用性对
关于我的问题SQL是， 我有一个表，用户可以在其中输入名为 time_report 的时间报告数据。每个 time_report 都输入一个服务代码，每个代码都有不同的含义，包括开始、停止、时间和总计
在 Total Commander 中搜索时如何忽略 .svn 文件夹？ 最佳答案 要从搜索中排除某些文件或文件夹，请在“搜索字段:”中使用以下语法: 从搜索中排除 *.bak 和 *.old 文件
我将如何编写 css 来访问以下类“total total_plus hidden_elem”或“total total_plus”？ 我有 class="total total_plus"和 c
我正在查看 powershellpro.com 上的一些代码示例，但不明白他为什么编写循环数组的示例代码: ...增量从零开始然后加一，直到它小于或等于数组的长度减一... for ($i=0; $i
做了一个虚拟数据: data dummy; input q1 q3 q4 q2 q6$ bu$ q5; cards; 1 2 3 5 sa an 3 2 4 3 6 sm sa 4 6 5 3 8 c
我想知道如何在 magento 1.7 的订单网格中添加以下两个额外的列 客户总订单数 客户在订单上花费的总金额 我已经设法添加了列，但我无法让它显示任何数据。我相信问题的关键在于函数 *_prepa
我正在使用 dataImportHandler 将数据从 Oracle 数据库导入 solr。尽管导入和索引编制成功，但由于未创建文档，我无法搜索。日志中也没有错误。这是我的配置文件片段。请帮忙。
项目 item_id title active = 1/0 items_categories_map item_id category_id 我需要得到结果 category_id items_tot
当我运行命令时: find / 2>/dev/null -user root -type f -mmin -1 -exec du -cb {} + | grep total | head -1 我得到
我不明白为什么有时，计划的总成本可能是一个非常小的数字，而查看计划的内部，我们会发现巨大的成本。 (确实查询很慢)。 有人可以解释我吗？ 这是一个例子。 显然，成本高的部分来自主选择中的一个字段，该字
因此，脚本以初始值 $8.90 开始，其想法是根据所选选项添加额外费用，HTML 分为 3 个部分 1.check-boxes、2 .选择并3.输入(文本)。 每个部分都是独立工作的，我正在尝试找到一
我有一个小问题。我一直在网上寻找答案，但主要是针对未生成/添加的输入字段。 $(document).ready(function(){ /* --- ADD FIELD --- */ $('
js框架。我正在尝试将数据从发布请求保存到数据库 模型(文章.js): NEWSCHEMA('Article').make(function(schema) { schema.define('titl
我想要所有间隔的总和，但我写这段代码时出现错误:使用未分配的局部变量 total ? enter TimeSpan total; foreach (var grp in query) { Time
我得到了以下数据，我需要返回递归总数(在本例中为 60)。下面的代码返回TypeError: Cannot read property 'Symbol(Symbol.iterator)' of und
我的项目要插入几个小时，你花了多少时间。它适用于整数值，但现在我需要添加字符串值。像Sunday ="NotWorknig"这样的东西；星期一=“8”；星期二=“生病了”； function Tota
尝试让停止按钮在用户单击开始时提供数字的运行总数。停止按钮不会给出总数，也不会保存您单击它时开始给出的数字。 我在这里做错了什么？ package com.egroegnosbig.dicerolle
我是一名优秀的程序员,十分优秀！