0

I have a problem with Angular, it seems to not do the two way binding. I'm pretty new on this stuff, so I might just look over something. Here is my code.

View:

<ion-view view-title="Update challenge">
<ion-content>

<ion-list>
  <ion-item>
    Current total
    <span class="item-note">
      {{challengeProgress.current_total_reps}}
    </span>
  </ion-item>

  <ion-item>
    Ultimate goal
    <span class="item-note">
      {{challengeProgress.total_reps}}
    </span>
  </ion-item>

  <ion-item>
    Todays goal
    <span class="item-note">
      {{todaysReps}}
    </span>
  </ion-item>

  <ion-item>
    Left for today
  </ion-item>


  <ion-item>
    <label class="item item-input">
      <input type="text" placeholder="Performed reps" ng-model="reps">
    </label>
  </ion-item>
  <div class="button button-calm button-block" ng-click="updateProgress()">Update!</div>
  Reps {{reps}}
</ion-list>

Controller:

$scope.reps;
$scope.updateProgress = function(reps){
  console.log(reps);
  SendToAPI.updateChallenge(u_id, c_id, toAdd);
}

reps seems to be undefined and the {{reps}} doesn't get updated either.

Improve this question
8
  • user $scope.reps in controller.
    – Deepak Tripathi
    Commented Jan 27, 2016 at 6:08
  • show us your controller
    – hgoebl
    Commented Jan 27, 2016 at 6:10
  • ion-item is a child of ion-list, which implies that you have more than one item, which could each have a reps model, but you reference reps outside the ion-item, implying that there is only one.
    – Claies
    Commented Jan 27, 2016 at 6:10
  • Then it still doesn't get updated
    – Bas Pauw
    Commented Jan 27, 2016 at 6:11
  • it seems that the div with the ng-click and the expression need to be moved inside the ion-item, but you haven't really shown enough of the other parts of the page this is on for any further context. I highly doubt that your view is only these elements.
    – Claies
    Commented Jan 27, 2016 at 6:13

3 Answers 3

Reset to default
1

There is no need to pass reps as parameter.You can have access in the $scope.updateProgress function as $scope.reps.

HTML : 

<div class="button button-calm button-block" ng-click="updateProgress()">Update!</div>

JS : 

  $scope.updateProgress = function(){
  console.log($scope.reps);
  //SendToAPI.updateChallenge(u_id, c_id, toAdd);
}

Please check Plunker

Improve this answer
1
  • That's what I thought at first aswell, but that didn't work somehow
    – Bas Pauw
    Commented Jan 27, 2016 at 6:54
0

This appears to be a combination of issues related to the ionic framework.

The first issue is that ion-item elements actually create a child scope, and because reps is a primitive rather than an object, it isn't visible in other scopes due to prototype inheritance. This is easily fixed by ensuring that the reps is inside the same ion-item as the function that will be consuming it, though it could also be solved by making an object on $scope, $scope.workout.reps for example, that does not have the same issues with inheritance.

The second issue seems to be that the function itself is never actually firing. On the surface, this appears to be some sort of issue with the CSS in ionic, but it is easily fixed by changing the div to an ion-item instead.

The following shows the working changes to the view:

<ion-item>
  <label class="item item-input">
    <input type="text" placeholder="Performed reps" ng-model="reps">
  </label>

  <ion-item class="button button-calm button-block" 
            ng-click="updateProgress(reps)">Update!</ion-item>
  Reps {{reps}}
</ion-item>

http://codepen.io/Claies/pen/EPEBZN

Note in the codepen, I log both the passed in reps and $scope.reps, to prove that there is an inheritance issue.

Improve this answer
1
  • That helped a lot, I got it working now! Thanks a lot!
    – Bas Pauw
    Commented Jan 27, 2016 at 11:36
0

Bas dont seem like you have 1. declared an app and 2. wrapped your html with an ng-controller. Without a controller there is no link between you HTML and your controller. As you can see with 2 way binding there is no need for a ng-click as it is updated into HTML as well as your controller

Here is a basic working example of your code:

https://plnkr.co/edit/w2B7iRcaoTiOCdL1JJTX?p=preview

   <!DOCTYPE html>
   <html ng-app="plunker">

  <head>
  </head>

  <body ng-controller="MainCtrl">
      <h1>Hello Plunker!</h1>
      <label class="item item-input">Label</label>
      <input type="text" placeholder="Performed reps" ng-model="name" />
      // BUTTON NOT NEEDED for update but can used for some other event 
      <button class="button button-calm button-block" ng-click="updateProgress()">Update!</button>
      <p>Hello {{name}}!</p>
    </div>
  </body>

    </html>

Script:

(function(angular) {
  'use strict';
var myApp = angular.module('myApp',[]);

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.name = "Hello World";

  $scope.updateProgress = function(val){
    console.log(reps);
      $scope.name = val;
  };

}]);

})(window.angular);
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.