Question

使用value="{{selected.price}}"，我从我的json列表中选择一个产品（通过输入'P'）。我的目标是自动设定总价。但我无法显示所选产品的价格（<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>  </div> </body> </html>），因此可以计算总数。不知道我做错了什么。

Plunker：http://plnkr.co/edit/F9jPt7IZgsWyON2vEmic

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

products.json

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;
        }          
    }  

}]);

的script.js

prc

更新＃1

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

selected.price

这会正确显示价格和初始（1）数量。谢谢@AbdelrhmanMohamed

现在的问题是，我不确定如何使用selected.price值来计算总价（价格*数量）。选择产品后，会显示价格，但在displayPrice（）中仍未定义$scope.$watch

更新＃2

问题：更改ng-model时ng-change未触发

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

解决

 Stetho.initializeWithDefaults(this);
    Stetho.newInitializerBuilder(this)
            .enableDumpapp(Stetho.defaultDumperPluginsProvider(this))
            .enableWebKitInspector(Stetho.defaultInspectorModulesProvider(this))
            .build();

Answer 1

我设法省略了$ watch（）功能，你不需要它，因为所有绑定都能正常工作。

首先将ng-change更改为typeahead-on-select

由于在每个keydown事件上执行ng-change，因此我们不需要它，直到我们从列表中选择实际值。您可以使用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">会在选择值后立即执行。

你的先行指令：

data MyData = MyData { arrInt :: [Int] , arrDouble :: [Double], arraySize :: N }

除此之外，代码没有重大变化只是微小的变化：看看实例：http://plnkr.co/edit/R3LON9?p=preview

希望这会有所帮助，祝你好运。

使用Angularjs计算总价格和数量

1 个答案:

首先将ng-change更改为typeahead-on-select