Angular doesn't set databinding

Question

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.

`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, Jan 27 '16 at 06:10
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, Jan 27 '16 at 06:13
I answered a similar question ... might help FWIW http://stackoverflow.com/questions/34567742/value-in-ng-model-doesnt-update/34568006#34568006 — Nolan, Jan 27 '16 at 06:38
@Nolan Unfortunatly it didn't, I think I know the basics about how two way databinding works. But I seem to fail to get it to work in this example. — Bas Pauw, Jan 27 '16 at 06:50
@Claies I tried to put the `div` within the `ion-item` but that didn't seem to work, neither did seperating the input from the list — Bas Pauw, Jan 27 '16 at 06:52

score 1 · Answer 1 · answered Jan 27 '16 at 06:10

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

answered Jan 27 '16 at 06:10

RIYAJ KHAN

15,032
5
31
53

That's what I thought at first aswell, but that didn't work somehow – Bas Pauw Jan 27 '16 at 06:54

score 0 · Answer 2 · answered Jan 27 '16 at 07:54

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);

score 0 · Accepted Answer · answered Jan 27 '16 at 08:55

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.

That helped a lot, I got it working now! Thanks a lot! – Bas Pauw Jan 27 '16 at 11:36 — Bas Pauw, Jan 27 '16 at 11:36

Angular doesn't set databinding

3 Answers3

Linked