angular.js Updating model

Question

If you try the jsfiddle link below, type something in the textbox labeled "Tag Name" and hit the update button. Notice the console.log > ParmAndValue.Value is set to what you typed in, as expected. But now type something else in and hit update again. This time is doesn't update the model? How come?

https://jsfiddle.net/8evuoqLz/11/

<body ng-app="eApp">
<div id="sms" ng-controller="smsController" ng-cloak>
  <ul id="paramsList" class="ulDynamic">
    <li ng-repeat="actionParam in actions.SmsResponseActionParmAndValue" id="li_{{actionParam.Order}}">
      <div ng-repeat="param in actionParam.ParmAndValue">
        <label ng-bind="param.ParmName"></label>
        <input ng-model="param.Value" type="{{param.SmsInputType}}" />
      </div>
    </li>
  </ul>
<br>

javascript

var app = angular.module('eApp', []);
  app.controller('smsController', function ($scope) {

  $scope.actions = {"SmsResponseActionParmAndValue":[{"Description":"Tag     User","Order":null,"ParmAndValue":[{"ParmId":9,"ParmName":"Tag Name","ParmType":"String","ParmVersion":"","Value":"","ValueId":null,"ValueVersion":"","ExtensionData":{},"Id":null,"Version":null}],"ExtensionData":{},"Id":10,"Version":"AAAAAAp96lg="}],"ExtensionData":{},"Id":null,"Version":null};

  $scope.updateDetails = function () {
    console.log("update");
    console.log($scope.actions.SmsResponseActionParmAndValue);
  };
});

It only works the first time... type something in and hit update and notice the Value property. It's set the first time, now type another word in and hit the update button and the Value does not update. You have to look in the Console window to tell... — Mark
– Mark, Commented Feb 11, 2016 at 23:34
Not in Firefox? Type one in the textbox hit update. In the console.log window notice ParmAndValue.Value is set to one. That works. Now type two in the textbox hit update. In the console.log window notice ParmAndValue.Value is still set to one! — Mark
– Mark, Commented Feb 11, 2016 at 23:45

CodeArtist · Accepted Answer · 2016-02-12 00:11:32Z

1

You missed the key SmsInputType from ParmAndValue. Now each time the Value gets updated.

"ParmAndValue": [{
    "ParmId": 9,
    "ParmName": "Tag Name",
    "ParmType": "String",
    "ParmVersion": "",
    "Value": "",
    "ValueId": null,
    "ValueVersion": "",
    "ExtensionData": {},
    "Id": null,
    "Version": null,
    "SmsInputType": "text" //<---- This one
  }],

Here is the full code:

var app = angular.module('eApp', []);
//Controller
app.controller('smsController', function($scope) {

  $scope.actions = {
    "SmsResponseActionParmAndValue": [{
      "Description": "Tag User",
      "Order": null,
      "ParmAndValue": [{
        "ParmId": 9,
        "ParmName": "Tag Name",
        "ParmType": "String",
        "ParmVersion": "",
        "Value": "",
        "ValueId": null,
        "ValueVersion": "",
        "ExtensionData": {},
        "Id": null,
        "Version": null,
        "SmsInputType": "text"
      }],
      "ExtensionData": {},
      "Id": 10,
      "Version": "AAAAAAp96lg="
    }],
    "ExtensionData": {},
    "Id": null,
    "Version": null
  };

  $scope.updateDetails = function() {
    console.log("update");
    console.log($scope.actions.SmsResponseActionParmAndValue[0].ParmAndValue[0].Value);
    console.log($scope.actions.SmsResponseActionParmAndValue);
  };
});

edited Feb 12, 2016 at 0:11

answered Feb 11, 2016 at 23:43

CodeArtist

5,7068 gold badges46 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mark Over a year ago

I added that but still doesn't update Value in ParmAndValue for me. Firefox

CodeArtist Over a year ago

Did you hit "Play" again? I'm using firefox too and it's working fine. I'm going to update my answer to show the full code, however i changed only the SmsInputType and i formatted the code. You may consider to clean browser cache.

Mark Over a year ago

Crazy, so the console.log all the way to the Value, looks correct. But the console.log of the object and the traversing it doesn't? That's odd: jsfiddle.net/8evuoqLz/15

Mark Over a year ago

is it just a bug in Firebug?

gizmore · Accepted Answer · 2016-02-11 23:43:32Z

1

It works for me as well.

Possible reason for your post:

1) weird behaviour of your browser.

2) looking at the wrong data in that "messy" structure.

console.log($scope.actions.SmsResponseActionParmAndValue[0].ParmAndValue[0].Value);

answered Feb 11, 2016 at 23:43

gizmore

887 bronze badges

4 Comments

Mark Over a year ago

Well strange, when I do your above console.log it seems to show the updated value, but when you navigate the object it doesn't. See jsfiddle.net/8evuoqLz/14

gizmore Over a year ago

Works flawless for me. I assume you are using Firebug on Firefox, and got used to it´s (no more?) weird behaviour of updating old output with new values.

Mark Over a year ago

I think it's a bug in Firebug

gizmore Over a year ago

Told you so! lvlup please? ;)

cs-NET · Accepted Answer · 2016-02-11 23:44:36Z

0

It updates the model for me. I reviewed the code and it looks fine. Are you sure you are not looking at the previous object in the debug console instead of the new one?

answered Feb 11, 2016 at 23:44

cs-NET

5264 silver badges3 bronze badges

1 Comment

Mark Over a year ago

I'm sure, make sure you hit update, then type something again and hit update and check the Value

Collectives™ on Stack Overflow

angular.js Updating model

3 Answers 3

4 Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related