16

如何访问 Angular 中的隐藏字段？我有一个应用程序，我想为列表中的每个项目提交一个表单。表单很简单——它有提交按钮和一个包含 ID 值的隐藏字段。但它不起作用。该值为空。

我更新了默认的角度示例以显示情况 - 待办事项文本位于隐藏字段中。

http://jsfiddle.net/tomasfejfar/yFrze/

4

7 回答 7

13

如果您不想在 javascript 文件中硬编码任何内容，您可以通过 AJAX 加载它，或者执行以下操作：

<input type="hidden" name="value" ng-init="model.value=1" value="1">

这样，您可以在关闭 JS 的情况下保持表单功能，并且仍然使用 AngularJS 中的隐藏字段

于 2013-05-24T06:49:28.370 回答
8

如果您想将 ng-repeat 中的 ID 传递给您的代码，则不必使用隐藏字段。这是我所做的：

例如，假设我正在循环浏览一组电影，当您单击“阅读更多”链接时，它会将您的 ID 传递给您的 JS 代码：

<ul>
  <li ng-repeat="movie in movies">
    {{movie.id}} {{movie.title}} <a href="#" ng-click="movieDetails(movie)">read more</a>
  </li>
</ul>

然后在您的 JS 代码中，您可以像这样获取 ID：

$scope.movieDetails = function (movie) {
  var movieID = movie.id;
}
于 2012-07-26T20:56:33.267 回答
2

在您更简单的小提琴中，可以通过使用 ng-init 或在控制器中设置初始值来解决问题。该value属性不会影响 ng-model。

http://jsfiddle.net/andytjoslin/DkMyP/2/

此外，您的初始示例 (http://jsfiddle.net/tomasfejfar/yFrze/) 在 Chrome 15/Windows 7 上的当前状态下适用于我。

于 2012-06-25T01:34:04.273 回答
2

你可以做这样的事情。
这是一个肮脏的把戏，但它可以工作（就像大多数肮脏的把戏一样;-)
你只需使用表单名称作为你的隐藏字段
并始终为表单提供 id "form"

<!doctype html><html ng-app><head>
<script src="angular-1.0.1.min.js"></script>
<script>
function FormController($scope) {
  $scope.processForm = function() {alert("processForm() called.");
    $scope.formData.bar = "";
    try {$scope.formData.bar = document.getElementById("form").name;} 
    catch(e) {alert(e.message);}
    alert("foo="+$scope.formData.foo+ " bar="+$scope.formData.bar);
  };
}
</script></head><body>
<div ng-controller="FormController">
<form name="YourHiddenValueHere" id="form">
<input type="text" ng-model="formData.foo" />
<button ng-click="processForm()"> SUBMIT </button>
</form>
</div></body></html>

这允许您对所有表单使用一个控制器并将
它们发送到一个服务器脚本。该脚本通过
表单名称 (formData.foo) 进行区分并知道要做什么。
隐藏字段命名此场景中的操作。

瞧——您有一个完整的应用程序，其中包含
您想要的任意数量的表单以及一个服务器脚本
和一个用于所有表单的 FormController。

于 2012-10-23T12:29:00.050 回答
1

更简单：

<input type="hidden" name="livraisonID" value="{{livraison.id}}"/>

有用！

于 2013-11-12T10:19:32.090 回答
0

我必须纠正（改进）自己：
你可以做得更优雅：

<form>
<input type="text" ng-model="formData.foo" />
<input type="hidden" id="bar" value="YourHiddenValue" />
<button ng-click="processForm()"> SUBMIT </button>
</form>

然后在 JavaScript 控制器中：

$scope.formData.bar = "";
try {$scope.formData.bar = document.getElementById("bar").value;} 
catch(e) {alert(e.message);}
alert("foo="+$scope.formData.foo+ " bar="+$scope.formData.bar);

因此，您可以拥有任意数量的隐藏字段。

于 2012-10-23T12:39:57.287 回答
0

使用ng-binding="{{employee.data}}". 它会正常工作。

于 2016-07-04T10:28:28.187 回答