html - How to call a javascript function and alter a variable in an Angular controller? -
i trying learn angular.js. trying understand basic concepts. have taken example w3schools , tried alter display variable can incremented click of button. i'm trying keep different elements separate possible can understand how connects. have left portion of example in be sure enerything working suppose to. here code doesn't work.
learningangular.js
var myapp = angular.module("myapp", []); myapp.controller("mycontroller", mycontroller); function mycontroller($scope) { $scope.firstname = "john"; $scope.counter = 0; } function start_counting(){ mycontroller.counter ++; }
index.html
<!doctype html> <html> <head> <title>learning angular</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script type="text/javascript" src="learningangular.js"></script> </head> <body ng-app="myapp" ng-controller="mycontroller"> first name: <input type="text" ng-model="firstname"><br> <br> full name: {{firstname}}<br> <button onclick="start_counting()">start counting</button><br> counter: <span>{{counter}}</span> </body> </html>
the function should declared in $scope's scope:
function mycontroller($scope, $interval) { $scope.firstname = "john"; $scope.counter = 0; $scope.start_counting = function(){ $scope.counter ++; }; $interval(function() { $scope.start_counting(); }, 1000); }
Comments
Post a Comment