使用 ui.bootstrap.typeahead，我从我的 json 列表中选择一个产品(通过键入“P”)。我的目标是自动设置总价。但我无法显示所选产品的价格 (value="{{selected.price}}") 因此它可以计算总计。不确定我做错了什么。
笨蛋:http://plnkr.co/edit/F9jPt7IZgsWyON2vEmic
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="script.js"></script>
<script>
angular.module("app", ["ui.bootstrap.productautocomplete"]);
</script>
</head>
<body>
<div class="container" ng-app="app">
<div ng-controller="ProductAutocompleteCtrl">
<div class="col-sm-4">
<input id="product_info" name="product_info" ng-change="displayPrice()" type="text" placeholder="Autocomplete - Type 'P' to find product's name" ng-model="selected" typeahead="product as product.name for product in products | filter:$viewValue | limitTo:8" class="form-control"
autocomplete="off">
</div>
<div class="col-sm-2">
<input id="price" name="price" ng-model="prc" ng-validate="number" placeholder="Autocomplete - Price" type="text" class="form-control" value="{{selected.price}}">
</div>
<div class="col-sm-1">
<input id="quantity" name="quantity" ng-model="qty" ng-change="changePrice()" ng-validate="integer" placeholder="Quantity" type="text" class="form-control">
</div>
<div class="col-sm-2">
<input id="total_prod1" name="total_prod1" ng-model="totalprod" ng-validate="number" placeholder="Total price" type="text" class="form-control" value="">
</div>
</div> <!-- ng-controller -->
</div>
</body>
</html>
产品.json
{"products":[
{"productversion":1,"name":"product1","price":"10.00"},
{"productversion":2,"name":"product2","price":"20.00"}
]}
脚本.js
angular.module('ui.bootstrap.productautocomplete', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.productautocomplete').controller('ProductAutocompleteCtrl', ['$scope', '$http', '$location', function($scope, $http, $location) {
$scope.selected = undefined;
var urlapiproducts = "products.json" ;
//console.log(urlapiproducts);
$http.get(urlapiproducts).success(function(data, status, headers, config) {
$scope.products = data.products;
// console.log(data);
}).error(function(data, status, headers, config) {
console.log("No data found..");
});
$scope.displayPrice = function(){
var qty = 0;
var prc = 0;
qty = 1;
prc = $scope.prc;
$scope.qty = qty;
$scope.totalprod = qty * prc;
}
$scope.changePrice = function(){
var qty = 0;
var prc = 0;
qty = $scope.qty;
prc = $scope.prc;
if(qty > 0 && prc > 0)
{
$scope.totalprod = qty * prc;
}
}
}]);
更新 #1
ng-model 从 prc 更改为 selected.price
<input id="price" name="price" ng-model="selected.price" ng-validate="number" type="text" value="{{selected.price}}">
这会正确显示价格和初始 (1) 数量。谢谢@AbdelrhmanMohamed
现在的问题是我不确定如何使用 selected.price 值来计算总价(价格 * 数量)。选择产品时显示价格，但 selected.price 在 displayPrice() 中仍未定义
更新#2
问题:当 ng-model 改变时 ng-change 没有触发
使用 $scope.$watch 解决:
$scope.$watch('selected.price', function() {
$scope.displayPrice();
});
最佳答案
我设法省略了 $watch() 函数，您不需要它，因为所有绑定(bind)都可以正常工作。
首先将 ng-change 更改为 typeahead-on-select
由于 ng-change 在每个 keydown 事件上执行，我们不需要它，直到我们从列表中选择一个实际值。您可以使用 typeahead-on-select 代替 ng-change，它会在选择一个值后立即执行。
您的 typeahead 指令:
<input id="product_info" name="product_info" typeahead-on-select="displayPrice(product)" type="text"
placeholder="Autocomplete - Type 'P' to find product's name" ng-model="product"
typeahead="product as product.name for product in products | filter:$viewValue | limitTo:8"
class="form-control" autocomplete="off">
除此之外，代码没有重大变化，只有微小的变化: 看一下现场示例:http://plnkr.co/edit/R3LON9?p=preview
希望这对您有所帮助，祝您好运。
关于javascript - 使用 Angularjs 计算总价和数量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39069321/