5

Necesito enviar el valor de un campo oculto con ng-value coloco el código de la que estoy enviando un tipo de contenido de texto

<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" ng-model="c.cid" ng-value="'{{p.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" id="">CANCELAR</button>
            </div>
            <div class="send-comment">
                <button type="submit" name="button" ng-click="c.addComment()">ENVIAR</button>
            </div>
        </div>
    </div>
</form>

En la consola de Chrome sólo me captura el texto escrito en el área de texto. p.id es el valor de la post para comentar

angular .module('apiFromApp')

.controller('CommentController', CommentController);

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

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

    //sendComment();

    self.addComment = function() {
      console.log(self);
    }
}
3
  • Hola Kelly, he estado pendiente de tu pregunta porque me parece interesante pero he visto que la has modificado para aportar la solución que has aplicado. Eso no se debe hacer así porqué confundirá al resto de usuarios que la lean. Deberías añadir una respuesta con tu solución (se copiará en código) y luego quitarlo de la pregunta. Además yo también tengo otra solución que proponerte. Saludos
    – rsciriano
    el 10 may. 2016 a las 16:43
  • Ok mil disculpas a la comunidad. implemente como me explico devconcept y y me funciona tal cual como lo explica el, pero a la final si tienes otra solución que aportar podrías dármela y así coger mayores conocimientos @rsciriano
    – vdjkelly
    el 10 may. 2016 a las 19:28
  • Kelly, Errar es de humanos rectificar es de sabios. Pero por favor, haz los cambios que te comento. Además, añadiendo tu solución como respuesta, si gusta, podrías ganar la medalla de Autodidacta. Yo mañana añado una respuesta compartiendo mi versión de la solución, que hoy voy bastante mal de tiempo. Saludos
    – rsciriano
    el 10 may. 2016 a las 21:07

2 respuestas 2

4

Esto es un problema conocido de angular y que tiene forma sencilla de solucionar

Comenzaré diciendo que no deberías bindear un input de tipo hidden usando ng-value

Bindea la expresión dada al valor del elemento <option> o al input[radio], para que cuando el elemento sea seleccionado, al ngModel de ese elemento se le asigne el valor deseado.

Como vez esta directiva está diseñada para ser usada con elementos option y elementos input de tipo radio. Tu estás usando uno de tipo hidden por lo que no funcionará.

También debes saber que la directiva ng-model no funciona con inputs de tipo hidden aún. Hay un extenso debate se se debe usar o no pero básicamente y para que te funcione en todas las versiones de angular deberías usar las siguentes alternativas.

  • Usar un binding simple en el atributo value para que el input tenga el valor correcto

    <input type="hidden" name="campo" value="{{modelo.valor}}">
    
  • Si quieres cambiar el valor de una expresión para simular el comportamiento de ng-model debes usar la directiva ng-init o asignar la expresión manualmente en tus controllers

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

Uniendo todo lo anterior en un ejemplo

(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>

En una nota personal a mí no me gusta mucho usar ng-init, deberías agregar eso en tus controllers ya que estos deberían ser siempre los encargados de manejar la lógica y abusar de ng-init puede crear bugs muy sutiles y difíciles de encontrar.

Esta directiva puede ser abusada para agregar cantidades innecesarias de lógica en las plantillas. Existen muy pocos casos apropiados para usar ngInit, como por ejemplo crear alias a algunas propiedades de ngRepeat y para inyectar via scripts del lado del servidor. Aparte de esos pocos casos, deberías usar controllers en vez de ngInit para inicializar valores en un scope.

7
  • Gracias pero termine usando de esta manera eliminando el ng-init de mi vista <input type="hidden" ng-model="c.cid" ng-value="c.cid = p.id">
    – vdjkelly
    el 10 may. 2016 a las 14:59
  • 1
    @KellyJesusSalazarSanchezDj Estás usando mal la directiva ng-value. Lo que pones es exactamente la función de la directiva ng-init. Como te expliqué ng-value no está diseñada para los inputs de tipo hidden ni para ejecutar expresiones. Deberías ejecutar esa expresión en un controller o en ng-init pero en ningun caso usar ng-value, no está diseñado para eso. Por último deberías quitar ng-model ya que no cumple ninguna función y ambos pueden confundir a cualquiera que lea el código que pones.
    – devconcept
    el 10 may. 2016 a las 15:07
  • No se si estare usandolo mal pero el codigo tal cual como lo coloque me a funcionado enviadome el ng-model="c.cid" ID del post al controlador para luego ser almacenado en la Tabla Comments voy a intentar de tu forma como dices lo que si vi es que no dije de donde proviene el ng-value="'{{p.id}}'" ese id proviene del controlador posts id del posts al que se va a comentar
    – vdjkelly
    el 10 may. 2016 a las 15:17
  • @KellyJesusSalazarSanchezDj En mi ejemplo yo asigné un valor al controlador y usé ese valor para ejecutar la expresión ya que como dices está incompleta la pregunta. Si es una llamada asíncrona es más razón aún para asignar ese valor en el controlador en el momento que se obtiene y no en la vista. Deberías tambien actualizar el attributo value del input[hidden] para tener consistencia.
    – devconcept
    el 10 may. 2016 a las 15:24
  • Edite la pregunta no se si sea la forma correcta de hacerlo
    – vdjkelly
    el 10 may. 2016 a las 15:42
0

Aunque en el título dices "enviar valores de campos ocultos", lo habitual en una aplicación con AngularJs es que no se esté realizando un envío estándar de los datos de un formulario sino se que, desde el controlador, se estén obteniendo los valores para hacer una llamada a un servicio (que realizará una petición AJAX a servidor).

Como complemento a la respuesta de devconcept quería aportar otra solución en la que no hay ni formulario ni campo oculto.

Lo que tendía en la vista sería esto:

<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>

y el código del controlador sería:

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

    var vm = this;

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

});

La clave de esta implementación es el uso de ng-init="c.postId=post.id" para traspasar el identificador del post al controlador de envío de comentarios.

Nota: Como dice devconcept, no hay que abusar de la directiva ng-init pero en este caso su uso podría estar justificado.

Además cuando se usa la directiva ng-init hay que tener muy encuenta que, cuando se crea la instancia del controlador, todavía no se tienen los valores iniciales.

Para ese caso de lo que se puede hacer es definir un método en el controlador que es el que recibe los valores iniciales.

El controlador se cambiaría por:

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);
    };
});

Y la vista quedaría así:

<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>

Además, de esta otra manera hasta queda mucho mas limpio (lo puedes ver funcionando en este Plunker)

4
  • Tengo que agregar que esto es cierto el 90% de los casos ya que angular no necesariamente tiene que ser usado para hacer un SPA, simplemente usarlo para tomar control en el cliente. Es por eso que la directiva form hace una excepción cuando se le especifica el atributo action y envía el formulario al servidor al hacerle submit. Es por eso que le pongo en la respuesta que el valor del attributo value debería actualizarse. En este escenario usar input[hidden] tiene mucho sentido. Ademas los formularios también se usan para validaciones.
    – devconcept
    el 11 may. 2016 a las 20:55
  • Correcto @devconcept para ese caso hay que usar el input[hidden] tal cual lo has explicado tu pero me temo la gente lo usa muchas veces en otros casos en los que no es necesario. Saludos
    – rsciriano
    el 11 may. 2016 a las 21:06
  • Por cierto @devconcept, que sepas que le he dado un voto a tu respuesta :-)
    – rsciriano
    el 11 may. 2016 a las 21:08
  • Gracias a todos por las explicaciones ya casi termino la una parte de mi redsocial esto es solo un motor piloto y me encanto AngularJs, claro lo estoy trabando en conjunto con Laravel 5.1
    – vdjkelly
    el 11 may. 2016 a las 22:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.