Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Onsen & Angular: Data-binding fails

  • So it’s my first time using Monaca, Onsen UI and AngularJS, however I’m wondering about a certain issue which I can’t figure out for myself…

    What I want to do: When selecting a “client”, the callClientForm(clientID)-function is triggered to load the proper client from clients-array and making it available globally (as “$scope.client”). Afterwards, the data of this client will be managable in a dedicated client-edited-or-add-form. As you can also see, if no param (“cid”) was delivered to this function, an empty client-array will be created, so all the fields in the form will be empty to create a new client after clicking “Add client”:

     this.callClientForm = function(cid){
          $scope.cid = null; // To check later on if it's edit- or add-mode
          if (cid != null){
           $scope.cid = cid;
           $scope.client = angular.copy($scope.clients[cid]);   
          } else {
           $scope.client = {} // = new client
       // ... pushPage('singleClientForm');

    HTML, singleClientForm:

    <ons-input type="text" modifier="underbar" placeholder="Name:" ng-model="" float></ons-input>
    <ons-input type="text" modifier="underbar" placeholder="Age:" ng-model="client.age" float></ons-input>
     <ons-button ng-click="clientReset(client)">Abort</ons-button>
     <ons-button ng-click="clientAddUpdate(client)">{{ ? 'Edit' : 'Add' }} client</ons-button>

    However, once a client has been selected and displayed in the edit-form, I can’t create a new (EMPTY!) client, meaning that every time I call callClientForm() - WITHOUT parameter -, the $scope.client = {} will have no effect and the form-input-data will still contain the formerly loaded client… I don’t know what I’m doing wrong as I adapted much of the code from Angular’s official docu… some problems seem to come up when trying to reset scope-data. Any ideas on that?

  • @FlxAlbroscheit I am not an Angular user and this may be a hack way of forcing what you want, but you could just do:

    delete $scope.client;
    $scope.client = {};

    I also would use this instead of just checking for null:

    angular.isUndefinedOrNull = function(val) {
        return angular.isUndefined(val) || val === null 

    So then your if is just:


  • @munsterlander Thx for your ideas, but the problem must be somewhere else… like if I save the $scope.client-object to console, I can see that it’s empty, but the data-binding is not working. Maybe Angular just doesn’t let me set back an object using = {}, so I would have to use a “master”-copy, like client = { id : ’ ’ , name : ’ ', … } . OR I failed using the Controller rightfully, but I don’t think so… The only thing I wan’t to know if there are some Onsen-Angular-related differences for this issue or if I violated angular’s best practices…?!

  • @FlxAlbroscheit I would believe your issue to be just Angular, but again, I don’t use it, so I could be wrong.