Using ui.bootstrap.typeahead , I select a product from my json list (by typing 'P'). My goal is to set the total price automatically. But I can’t get the price of the selected product to display ( value="{{selected.price}}" ) so that it can calculate the total. Not sure what I'm doing wrong.
Plunker: 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 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>
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; } } }]);
update # 1
ng-model has been changed from prc to selected.price
<input id="price" name="price" ng-model="selected.price" ng-validate="number" type="text" value="{{selected.price}}">
This shows the correct price and initial (1) value. Thanks @AbdelrhmanMohamed
Now the problem is that I'm not sure how to use the selected.price value to calculate the total price (amount of price *). When a product is selected, the price is displayed, but selected.price is still undefined in displayPrice ()
update # 2
Problem: ng-change does not work when changing ng-model
Solved using $scope.$watch :
$scope.$watch('selected.price', function() { $scope.displayPrice(); });