How to send hidden field values ​​with AngularJS

This is a known angular issue and there is a simple way to fix it.

I'll start by saying that you shouldn't bind an input of type hidden using ng-value

Binds the given expression to the value of the element <option>or to input[radio], so that when the element is selected, ngModelthat element's value is assigned the desired value.

As time this directive is designed to be used with option elements and input elements of type radio . You are using a hidden type so it won't work.

You should also know that the ng-model directive doesn't work with inputs of type hidden yet. There is an extensive debate on whether to use it or not, but basically and for it to work in all versions of angular you should use the following alternatives.

• Use a simple binding on the attribute valueso that the input has the correct value

  <input type="hidden" name="campo" value="{{modelo.valor}}">
  

• If you want to change the value of an expression to simulate the behavior of ng-model you must use the ng-init directive or assign the expression manually in your controllers

  <input type="hidden" name="campo" ng-init="modelo.valor = expresion">
  

Putting all of the above together in one example

(function() {
  'use strict';

  angular
    .module('apiFromApp', [])
    .controller('CommentController', CommentController);

  CommentController.$inject = ['$http'];

  /* @ngInject */
  function CommentController($http) {
    var self = this;

    self.id = 10;

    //sendComment();

    self.addComment = function() {
      console.log(self);
    }
  }
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="apiFromApp">
  <div class="mdl-card__actions mdl-card--border" ng-controller="CommentController as c">
    <ul class="img-comment-list" id="commentload">

    </ul>
    <form>
      <div class="comment_it commentupdate">
        <div class="up_img">
          <img src="" width="35" height="35" />
        </div>
        <div class="comments-text-post-area">
          <input type="hidden" value="{{c.Idcomment}}" ng-init="c.Idcomment = c.id">
          <textarea class="add-y-comment" ng-model="c.comment" placeholder="Comentar"></textarea>
        </div>

        <div class="comment-post-wall">
          <div class="cancel-comment">


            <button type="button" name="button" class="mdl-button mdl-js-button mdl-button--raised" id="" rel="">CANCELAR</button>

          </div>
          <div class="send-comment">

            <button type="submit" name="button" class="mdl-button mdl-js-button mdl-button--raised" ng-click="c.addComment()">ENVIAR</button>

          </div>
        </div>

      </div>
    </form>
  </div>
</div>

On a personal note I don't really like using ng-init, you should add that in your controllers as these should always be the ones handling the logic and abusing ng-init can create very subtle and hard to find bugs.

This directive can be abused to add unnecessary amounts of logic to templates. There are very few appropriate cases for using ngInit, such as creating aliases to some ngRepeat properties and for injecting via server-side scripts. Other than those few cases, you should use controllers instead of ngInit to initialize values ​​in a scope.

Although in the title you say "send values ​​of hidden fields" , the usual thing in an application with AngularJs is that a standard sending of the data of a form is not being carried out, but rather that, from the controller, the values ​​are being obtained to do a call to a service (which will make an AJAX request to the server) .

As a complement to devconcept 's answer, I wanted to provide another solution in which there is neither a form nor a hidden field.

What I would see in the view would be this:

<div ng-controller="PostCtrl as p">
  <h2>Posts</h2>
  <div ng-repeat="post in p.posts">
    <h3>{{post.title}}</h3>
    <div>{{post.content}}</div>
      <div ng-controller="CommentCtrl as c" ng-init="c.postId=post.id">
          <textarea ng-model="c.comment"></textarea>
          <input type="submit" ng-click="c.send()" />
      </div>
  </div>
</div>

and the controller code would be:

myApp.controller('CommentCtrl', function ($scope) {

    var vm = this;

    vm.send = function() {
        console.log('PostId: ' + vm.postId + ' Comment: ' + vm.comment);
    }

});

The key to this implementation is the use of ng-init="c.postId=post.id"to pass the post identifier to the comment submission controller.

Note: As devconcept says, the directive should not be abused ng-initbut in this case its use could be justified.

In addition, when using the directive, ng-initit must be taken into account that, when the controller instance is created, the initial values ​​are not yet available.

In this case, what can be done is to define a method in the controller that is the one that receives the initial values.

The controller would be changed to:

myApp.controller('CommentCtrl', function ($scope) {
    var vm = this;
    console.log('CommentCtrl-Create: ' + vm.postId);
    vm.init = function(postId){
        vm.postId = postId;
        console.log('CommentCtrl-Init: ' + postId);
    };

    vm.send = function() {
        console.log('PostId: ' + vm.postId + ' Comment: ' + vm.comment);
    };
});

And the view would look like this:

<div ng-controller="PostCtrl as p">
  <h2>Posts</h2>
  <div ng-repeat="post in p.posts">
    <h3>{{post.title}}</h3>
    <div>{{post.content}}</div>
      <div ng-controller="CommentCtrl as c" ng-init="c.init(post.id)">
          <p>{{c.postId}}</p>
          <textarea ng-model="c.comment"></textarea>
          <input type="submit" ng-click="c.send()" />
      </div>
  </div>
</div>

In addition, in this other way it is even much cleaner (you can see it working in this Plunker )