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="client.name" 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)">{{ client.id ? '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:

    if(angular.isUndefinedOrNull(cid)){
    


  • @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.


Log in to reply