CODEWITHSUNDEEP
angularjsangularjs-scopeangularjs-ng-repeat
user435943
user435943

Reputation: 974

AngularJS: How can I bind an object with properties?

I have a model that looks like this:

var mymodel = {
   name: {
      en: 'Ten',
      es: 'Diez',
      fr: 'Dix'
   }
};

And a view that looks like:

   <section ng-controller="MyController" ng-init="findOne()">
    <form ng-submit="update()">
        <div ng-repeat="(language, string) in mymodel.name">
            <label>Name ({{language | uppercase}}):</label>
            <input type="text" ng-model="mymodel.name[language]">
        </div>
        <input type="submit" value="Update">
        <pre>{{mymodel}}</pre>
    </form>
   </section>

When I modify the value of the textboxes, the object inside pre also changes as expected.

However, when I submit the form, the controller sends the initial values to the backend, instead of the modified ones.

The client controller looks like this:

angular.module('mymodule').controller('MyController', [..., function(...){
    ...
    $scope.update = function() {
       var mymodel = $scope.mymodel;
       console.log(mymodel.name);
       console.log(mymodel);
       mymodel.$update(function() {
          ...
          //Does not work as expected. Sends initial data instead of updates.
       });
    };
    ...
    $scope.findOne = function() {
        $scope.mymodel = MyFactory.get({ 
            id: $stateParams.id
        });
    };
    ...
}]);

For examlpe, if I type in the following strings: "Fifty", "Cincuenta", "Cinquante", and click "Update", the first console.log(mymodel.name) outputs the new values:

Object {
    es: "Fifty", 
    en: "Cincuenta",
    fr: "Cinquante"
}

But the second console.log(mymodel) outputs the initial values instead:

Resource {
    $promise: Object
    $resolved: true
    ...
    name: Object
       en: "Ten",
       es: "Diez",
       fr: "Dix"
    ...
}

The result is that the entry does not get updated in the backend.

EDIT

Thank you very much for your answers, I have found the error. The problem was somehow created by a plugin for interationalization in Mongoose ODM. When extending the properties of the response using lowdash, something (I have not found what exactly is yet) prevented the document from being updated, and returned the original values.

Im sorry, this had nothing to do with Angular, I was looking in the wrong place.

Upvotes: 0

Views: 85

Answers (2)

ababashka
ababashka

Reputation: 2101

I created a plunk with your code. Also i added file data.json which is used to get data with ngResource, but instead of id i use filename the code will to be more similar with yours. Data is returned great. View is updated. Then i try to emit data saving (press Update button) just for see console.logs. Data is written in both console.logs the same updated:

console.log(mymodel.name);

returns:

Object {en: "a", es: "a", fr: "a"}

And

console.log(mymodel);

returns

Resource {
  $promise: Object
  $resolved: true
  name: Object {
    en: "a"
    es: "a"
    fr: "a"
  }

I think that everything must be working fine.

Demo: http://plnkr.co/edit/6AzIsQ2vfsKZGR9RERwL?p=preview

Upvotes: 1

John Niedzwiecki
John Niedzwiecki

Reputation: 314

This issue is that you are binding to my model.name[language] not what you are using in the hg-repeat to iterate. The easiest solution is to change your model (if possible) to use a structure similar to names: [{‘lang’:’es’,’value’:’Diez’},{‘lang’:’en’,’value’:’Ten’}]. Then you can use a standard ng-repeat=“name in model.names” and then bind with ng-model=“name.value”

If you are stuck to that model, you could try var mymodel = angular.copy($scope.mymodel); first to see if it makes a difference. If you make up a plunker or jsfiddle that mimics your example, it could be easier to debug a solution.

Upvotes: 0

Related Questions