AngularJs Expression not working

Question

I have a weird issue with the {{json_req}} expression, the {{pseudo}} and {{password}} expression are working well, I can see the changes I make in live.

But nothing happened for the {{json_req}} expression, no matter what I write on the Login and Password input.

I guess It's a basic mistake by me but I'm a little lost with this one right now :/.

Thanks for the help :)

Login.html

<div class="row">
  Pseudo : {{pseudo}}
</div>
<div class="row">
  Password : {{password}}
</div>
<div class="row">
  json : {{json_req}}
</div>
<div class="row">
  <label class="float-center">
    Pseudo
    <input ng-model="pseudo" type="text" required>
    <span class="form-error">
      Pseudo Missing.
    </span>
  </label>
</div>
<div class="row">
  <label class="float-center">
    Password
    <input ng-model="password" type="password" required>
    <span class="form-error">
        Password Missing.
    </span>
  </label>
</div>

LoginCtrl.js

 mCtrl.controller('LoginCtrl', ['$scope', 'User', function ($scope, User) {


  $scope.json_req = {
    pseudo: $scope.pseudo,
    password: $scope.password
  };

  $scope.LoginUser = function () {
    if ($scope.json_req.pseudo != undefined && $scope.json_req.password != undefined) {
      User.login($scope.json_req).then(function (data) {
        $scope.response = data;
        $scope.json_req = {};
      });
    } else
      console.log("UNDEFINED");
  };
}]);

$scope.json_req is an object, so you'll have to specify which property you want to show. What output are you getting? — Jorrex
– Jorrex, Commented Apr 13, 2016 at 17:52
nope, no error. the password and pseudo expression are working, only json_req seems to not bee filled. — dabbu
– dabbu, Commented Apr 13, 2016 at 17:53
@Jorrex U can display the content of an Object like json_req with an expression. — dabbu
– dabbu, Commented Apr 13, 2016 at 17:55
Oh. Didn't know that :) Guess I learned something new as well. — Jorrex
– Jorrex, Commented Apr 14, 2016 at 6:51

dfsq · Accepted Answer · 2016-04-13 18:01:21Z

1

This is expected behaviour. When you write:

$scope.json_req = {
  pseudo: $scope.pseudo,
  password: $scope.password
};

you create a "snapshot" of the values for $scope.pseudo and $scope.password. They will not update when you change model later.

You could setup a $scope.$watch and update json_req when either of pseudo or password changes (not really recommended). Or what I would recommend, write a getter function on the scope:

Object.defineProperty($scope, 'json_req', {
  get: function() {
    return {
      pseudo: $scope.pseudo,
      password: $scope.password
    }
  }
});

edited Apr 13, 2016 at 18:01

answered Apr 13, 2016 at 17:56

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

Comments

Sombriks · Accepted Answer · 2016-04-13 17:58:46Z

0

Try this:

angular.module("asdfapp",[]).service("User",function(){}).controller('LoginCtrl', ['$scope', 'User', 
                                        function ($scope, User) {


  $scope.json_req = {
    pseudo: "",
    password: ""
  };

  $scope.LoginUser = function () {
    if ($scope.json_req.pseudo != undefined 
        && $scope.json_req.password != undefined) {
      User.login($scope.json_req).then(function (data) {
        $scope.response = data;
        $scope.json_req = {};
      });
    } else
      console.log("UNDEFINED");
  };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="asdfapp" ng-controller="LoginCtrl">
<div class="row">
  Pseudo : {{json_req.pseudo}}
</div>
<div class="row">
  Password : {{json_req.password}}
</div>
<div class="row">
  json : {{json_req}}
</div>
<div class="row">
  <label class="float-center">
    Pseudo
    <input ng-model="json_req.pseudo" type="text" required>
    <span class="form-error">
      Pseudo Missing.
    </span>
  </label>
</div>
<div class="row">
  <label class="float-center">
    Password
    <input ng-model="json_req.password" type="password" required>
    <span class="form-error">
        Password Missing.
    </span>
  </label>
</div>
</div>

answered Apr 13, 2016 at 17:58

Sombriks

3,6804 gold badges43 silver badges60 bronze badges

1 Comment

dabbu Over a year ago

Thank dude, that was the issue xS

dabbu · Accepted Answer · 2016-04-13 18:02:26Z

0

Ok I find the solution. And is expected It was a stupid mistake from me xD

I should write ng-model="json_req.pseudo" and not ng-model="pseudo" to fill the json_req object :/

Sorry to have bothered you guys !

Thanks

answered Apr 13, 2016 at 18:02

dabbu

77 bronze badges

Collectives™ on Stack Overflow

AngularJs Expression not working

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related