JnG February 2016

Implementing a toggle in ionic using angularjs

I am following up a tutorial I found here http://codepen.io/keval5531/details/LVYROp/

As a result I am able to come up with the below solution on my 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 to '+$scope.value);
   };
  });

Now I have this in my 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 is a plunk demo I have made https://plnkr.co/edit/MUp7QckDCgg50FvcfGeG?p=preview My challenge is that based on the codepen tutorial I am learning with, nothing happens on my display. Kindly assist!

Answers


Jannik February 2016

There is a couple of issues here. The first issue is that you didn't include the angular.js file, this is the core of angular and is required. Also, the angular source that you did use didn't work. Here is a fully 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 to '+$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 an alert for dramatic effect. Regards :)

Post Status

Asked in February 2016
Viewed 2,186 times
Voted 10
Answered 1 times

Search




Leave an answer