问用Angularjs计算总价格和数量
EN

Stack Overflow用户

提问于 2016-08-21 14:14:55

回答 1查看 2.4K关注 0票数 7

使用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>

products.json

{"products":[
{"productversion":1,"name":"product1","price":"10.00"},
{"productversion":2,"name":"product2","price":"20.00"}
]}

script.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-模型由prc改为selected.price。

<input id="price" name="price" ng-model="selected.price"  ng-validate="number" type="text" value="{{selected.price}}">

这适当地显示了价格和初始数量。感谢@AbdelrhmanMohamed

现在的问题是，我不知道如何使用selected.price值来计算总价(价格*数量)。选择产品时，会显示价格，但selected.price仍未在displayPrice()中定义

更新#2

问题:ng-当ng-模型改变时，不触发变化

用$scope.$watch解决

$scope.$watch('selected.price', function() {
  $scope.displayPrice();
});

javascript

angularjs

TDSQL-CMySQL免费体验

云原生数据库TDSQL-C MySQL 2核4G 免费体验15天

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-09-03 09:49:01

我设法删除了中的$watch()函数，您不需要它，因为所有绑定都正常工作。

首先，将ng更改为按选择的提前输入。

由于ng更改是在每个按键事件上执行的，所以在从列表中选择一个实际值之前，我们不需要它。您可以使用ng-change代替typeahead-on-select，只要选择了一个值，就会立即执行它。

您的提前输入指令：

 <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">