CODEWITHSUNDEEP
angularjshidden-fieldng-initangularjs-ng-value
Ben Wong
Ben Wong

Reputation: 701

Passing hidden value in angular

View: 

  <ul ng-repeat="x in posts.post">
      {{x.name}}  {{x._id}} {{x.post}} {{x.user_id}} 
      <br>
      <ul ng-repeat="y in x.comment">
        {{y.comment}}
      </ul>
      <input type="text" style="display: none;" ng-model='new_comment.userId' value={{users2.id}} name="userId"  >
      <input type="text" style="display: none;" ng-model='new_comment.name' value={{users2.name}} name="userName"   >
      <textarea ng-model='new_comment.comment' name="comment" rows="4" cols="50">
      </textarea> 
      <br>
      <input type="submit" value="Post Comment!" ng-click="addComment(x._id, new_comment)">
  </ul>

Controller: 

UserFactory.getUser(function (data) {
    $scope.users2 = data;
});

Factory: 

factory.getUser = function(callback) {
    $http.get("/user").success(function(output) {
        users2 = output;
        callback(users2);
    });
};

I am trying to pass the hidden values of users2.id and users2.name from the controller/factory into a form. I tried ng-init, ng-value as well as input type="hidden", but none works.

So this is what I did to get it working:

View: 

  <form>

  <textarea ng-model='new_comment.comment' name="comment" rows="4" cols="50">
  </textarea> 

  <br>
  <input type="submit" value="Post Comment!" ng-click="addComment(x._id, new_comment, users2.name, users2._id)">
  </form>

Controller: 

$scope.addComment = function(id, comment, userName, userId) {

var commentValue = comment.comment;

var newComment = {comment: commentValue, name: userName, userId: userId};

postFactory.addComment(id, newComment, function () {

    postFactory.getComment(function (data) {
        $scope.comments = data;
    });

    $scope.new_comment = {};
});
};

Upvotes: 0

Views: 4325

Answers (3)

Pankaj Parkar
Pankaj Parkar

Reputation: 136134

Two way binding wouldn't work with hidden element, so I'd use ng-value to set the value of type="hidden" element

<input type="hidden" ng-value='new_comment.userId' name="userId"/>
<input type="hidden" ng-value='new_comment.name' name="userName"/>

Upvotes: 1

Simon H
Simon H

Reputation: 21005

Try this

  <input type="hidden" ng-model='new_comment.userId' value="{{users2.id}}" name="userId"  >

And while you are changing things

UserFactory.getUser
.then(function (data) {
    $scope.users2 = data;
});

with

factory.getUser = function() {
    return $http.get("/user");
};

as $http returns a promise

Upvotes: 1

ArslanW
ArslanW

Reputation: 353

Do something like this, return the promise.

factory.getUser = function(callback) {
    return $http.get("/user")
};

Controller:

UserFactory.getUser().success(function(output) {
    $scope.users2 = output.data;
});

Upvotes: 0

Related Questions