Implementing a toggle in ionic using angularjs -
i following tutorial found here http://codepen.io/keval5531/details/lvyrop/
as result able come below solution on app.js
var app = angular.module('plunker', []); app.controller('democtrl', function($scope) { $scope.value = false; $scope.togglechange = function(){ if($scope.value == false) { $scope.value = true; } else $scope.value = false; console.log('testtoggle changed '+$scope.value); }; }); now have in index.html file
<!doctype html> <html ng-app="plunker" > <head> <meta charset="utf-8"> <title>angularjs plunker</title> <link rel="stylesheet" href="style.css"> <script src="http://code.angularjs.org/1.2.12/angular-resource.js"></script> <script src="app.js"></script> </head> <body> <div ng-controller="democtrl"> <br><br> <ion-toggle ng-model=value ng-change="togglechange()">test toggle</ion-toggle> </div></body> </html> here plunk demo have made https://plnkr.co/edit/mup7qckdcgg50fvcfgeg?p=preview challenge based on codepen tutorial learning with, nothing happens on display. kindly assist!
there couple of issues here. first issue didn't include angular.js file, core of angular , required. also, angular source did use didn't work. here functional example
var app = angular.module('plunker', []); app.controller('democtrl', function($scope) { $scope.value = false; $scope.togglechange = function(){ if($scope.value == false) { $scope.value = true; } else { $scope.value = false; console.log('testtoggle changed '+$scope.value); } }; });<!doctype html> <html ng-app="plunker" > <head> <meta charset="utf-8"> <title>angularjs plunker</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.12/angular.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.12/angular-resource.js"></script> </head> <body> <div ng-controller="democtrl"> <br><br> <input type="checkbox" ng-model=value ng-change="togglechange()">test toggle</ion-toggle> </div></body> </html>i used alert dramatic effect. regards :)
Comments
Post a Comment