如何使用AngularJS发送隐藏字段值

这是一个已知的角度问题，有一种简单的方法可以解决它。

我将首先说您不应该使用ng-value绑定隐藏类型的输入

将给定表达式绑定到元素的值<option>或绑定到input[radio]，以便在选择元素时，ngModel为该元素的值分配所需的值。

随着时间的推移，该指令被设计为与radio类型的选项元素和输入元素一起使用。您正在使用隐藏类型，因此它不起作用。

您还应该知道ng-model指令不适用于 hidden 类型的输入。关于是否使用它存在广泛的争论，但基本上，为了让它在所有版本的 Angular 中工作，你应该使用以下替代方案。

• 对属性使用简单绑定，value以便输入具有正确的值

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

• 如果要更改表达式的值以模拟 ng-model 的行为，则必须使用ng-init指令或在控制器中手动分配表达式

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

将以上所有内容放在一个示例中

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

就个人而言，我不太喜欢使用 ng-init，你应该在你的控制器中添加它，因为这些应该始终是处理逻辑的控制器，并且滥用 ng-init 会产生非常微妙且难以发现的错误。

可以滥用该指令向模板添加不必要的逻辑量。使用 ngInit 的合适案例很少，例如为某些 ngRepeat 属性创建别名以及通过服务器端脚本进行注入。除了这几种情况，您应该使用控制器而不是 ngInit 来初始化作用域中的值。

尽管在标题中您说“发送隐藏字段的值”，但使用 AngularJs 的应用程序中通常不会发送表单数据的标准发送，而是从控制器发送值正在获取对服务的调用（这将向服务器发出 AJAX 请求）。

作为devconcept答案的补充，我想提供另一种既没有表单也没有隐藏字段的解决方案。

我会在视图中看到的是：

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

控制器代码将是：

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

    var vm = this;

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

});

此实现的关键是使用ng-init="c.postId=post.id"将帖子标识符传递给评论提交控制器。

注意：正如 devconcept 所说，该指令不应被滥用ng-init，但在这种情况下，它的使用是合理的。

此外，在使用指令时，ng-init必须考虑到，在创建控制器实例时，初始值尚不可用。

在这种情况下，可以做的是在控制器中定义一个接收初始值的方法。

控制器将更改为：

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

视图看起来像这样：

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

此外，以另一种方式，它甚至更干净（你可以看到它在这个 Plunker中工作）