Ionic/Angular Routing

ionic-v1
1

Hi guys,

I thought I was getting the hang of routing in Ionic but I guess I’m still a noob at it.

I’m trying to change a value in one of the $scopes in my .JSON file from true to false when a button is toggled. Right now this is what my button looks like:

<label class="toggle toggle-assertive" ng-controller="FaveCtrl">
       <input type="checkbox" ng-model="fave">
       <div class="track">
       <div class="handle">
       </div>
       </div>
 </label>

Here’s my controller.js:

var dishApp = angular.module('dishApp.controllers', [])

dishApp.factory('dishes', function($http){

        function getData(callback){
          $http({
            method: 'GET',
            url: '/json/dishes.json',
            cache: true
          }).success(callback);
        }

        return {
          list: getData,
          find: function(title, callback){
            getData(function(data) {
              var dish = data.filter(function(entry){
                return entry.title === title;
              })[0];
              callback(dish);
            });
          }
        };
      })

.controller('DishesCtrl', function ($scope, dishes){
        dishes.list(function(dishes) {
          $scope.dishes = dishes;
        });
      })

.controller('DishCtrl', function ($scope, $stateParams, dishes){
        dishes.find($stateParams.dishTitle, function(dish) {
          $scope.dish = dish;
        });
      })

.controller('FaveCtrl', ['$scope', function($scope) {
      $scope.fave = true;
    }])

.filter('encodeURI', function(){
        return window.encodeURI;
      });

And here’s an example of my .JSON

[
    {
        "title": "Chicken with tomatoes & asparagus",
        "cat": 1,
        "fave": false,
        "cook": "30 minutes",
        "serves": 4
    }
   ]

If anyone could help explain me the routing or send me somewhere that does that would be so much appreciated. I know this is a total noob question but I’ve looked all over the place and am still confused by Angular/Ionic’s routing.

Thanks so much in advance guys!

2

Not sure what part of the code below you want to click? Is it the checkbox ?
Is so add this to it.

<label class="toggle toggle-assertive" ng-controller="FaveCtrl">
       <input type="checkbox" ng-model="fave" ng-click="toggle()">
       <div class="track">
       <div class="handle">
       </div>
       </div>
 </label>

And then in your FaveCtrl add this :smile:

.controller('FaveCtrl', ['$scope', function($scope) {
      $scope.fave = true;
      $scope.toggle=function(){
         // here you can access the json and change your value.
     }
    }])

Basically add the ng-click attribute to the button and write the name of the function inside it. Then on button click it will call that function. ng-click=“toggle()” would call the toggle function .

Hope that clarified stuff.