Pass model variable from controller to html using AngularJS -


i new angularjs. in example trying read 2 initiger value controller model , multiple numbers in html page using angularjs tag.

controller

(function (angular) { angular.module('invoice1', []) .controller('invoicecontroller', function () {     this.qty = 1;     this.cost = 2;   }); }) 

html

<!doctype html> <html ng-app> <head>  <title>angularjs form test 2</title>  <link href="content/bootstrap.min.css" rel="stylesheet" />  <script src="scripts/angular.min.js"></script>  <script src="invcontroller.js"></script> </head>  <body>   <div id="calculatenumber" ng-app="invoice1" ng-controller="invoicecontroller invoice">     <div>         quantity : <input type="number" min="0" ng-model="invoice.qty" />     </div>     <div>         costs : <input type="number" min="0" ng-model="invoice.cost" />     </div>     <div>         <b>total: </b> {{invoice.qty * invoice.cost | currency}}     </div>   </div>  </body> </html> 

you have mentioned multiple ng-app in html.

use ng-app="invoice1" in <html> tag, remove other 1 , go

<!doctype html> <html ng-app="invoice1"> <head>  <title>angularjs form test 2</title>  <link href="content/bootstrap.min.css" rel="stylesheet" />  <script src="scripts/angular.min.js"></script>  <script src="invcontroller.js"></script> </head>  <body>   <div id="calculatenumber" ng-controller="invoicecontroller invoice">     <div>         quantity : <input type="number" min="0" ng-model="invoice.qty" />     </div>     <div>         costs : <input type="number" min="0" ng-model="invoice.cost" />     </div>     <div>         <b>total: </b> {{invoice.qty * invoice.cost | currency}}     </div>   </div>  </body> </html> 

here's updated plunkr


Comments

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

twig - Using Twigbridge in a Laravel 5.1 Package -

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -