Javascript AngularJs 中的隐藏字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11176813/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hidden fields in AngularJs
提问by Tomá? Fejfar
How do I access hidden fields in angular? I have an app, where I want to submit a form for each of items in the list. The form is simple - it has submit button and a hidden field holding the ID value. But it does not work. The value is empty.
如何以角度访问隐藏字段？我有一个应用程序，我想在其中为列表中的每个项目提交一个表单。表单很简单——它有提交按钮和一个包含 ID 值的隐藏字段。但它不起作用。该值为空。
I updated the default angular example to display the situation - the todo text is in hidden field.
我更新了默认的角度示例以显示情况 - 待办事项文本位于隐藏字段中。
采纳答案by Andrew Joslin
In your simpler fiddle, the problem can be fixed by using ng-init or setting an initial value in the controller. The valueattribute won't effect the ng-model.
在您更简单的小提琴中，可以通过使用 ng-init 或在控制器中设置初始值来解决问题。该value属性不会影响 ng-model。
http://jsfiddle.net/andytjoslin/DkMyP/2/
http://jsfiddle.net/andytjoslin/DkMyP/2/
Also, your initial example (http://jsfiddle.net/tomasfejfar/yFrze/) works for me in its current state on Chrome 15/Windows 7.
此外，您的初始示例 (http://jsfiddle.net/tomasfejfar/yFrze/) 在 Chrome 15/Windows 7 上的当前状态下对我有用。
回答by pocesar
If you don't want to hardcode anything in your javascript file, you can either load it via AJAX, or do:
如果您不想在 javascript 文件中硬编码任何内容，您可以通过 AJAX 加载它，或者执行以下操作：
<input type="hidden" name="value" ng-init="model.value=1" value="1">
this way, you can keep the form functionality with JS off, and still use the hidden field in AngularJS
这样，您可以保持关闭 JS 的表单功能，并且仍然使用 AngularJS 中的隐藏字段
回答by phteven
If you want to pass the ID from the ng-repeat to your code, you don't have to use a hidden field. Here's what I did:
如果要将 ng-repeat 中的 ID 传递给代码，则不必使用隐藏字段。这是我所做的：
For example, let's say I'm looping through a collection of movies, and when you click the "read more" link it will pass your ID to your JS code:
例如，假设我正在循环浏览一系列电影，当您单击“阅读更多”链接时，它会将您的 ID 传递给您的 JS 代码：
<ul>
<li ng-repeat="movie in movies">
{{movie.id}} {{movie.title}} <a href="#" ng-click="movieDetails(movie)">read more</a>
</li>
</ul>
Then in your JS code, you can get the ID like this:
然后在你的 JS 代码中，你可以得到这样的 ID：
$scope.movieDetails = function (movie) {
var movieID = movie.id;
}
回答by Maximilian Eberl
You can do something like this.
It is a dirty trick, but it works (like most dirty tricks ;-)
You just use the form name as Your hidden field
and always give the form the id "form"
你可以做这样的事情。
这是一个肮脏的技巧，但它有效（就像大多数肮脏的技巧一样；-）
您只需使用表单名称作为您的隐藏字段，
并始终为表单提供 id“表单”
<!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>
This allows You to use ONE Controller for ALL forms and send
them to ONE server script.
The script than distinguishes by the
form name (formData.foo) and knows what to do.
The hidden field names the operation in this scenario.
Voila - You have a complete application with as
many forms You want and one server script
and one FormController for all of them.
这允许您对所有表单使用一个控制器并将
它们发送到一个服务器脚本。该脚本通过
表单名称 (formData.foo) 进行区分并且知道要做什么。
隐藏字段命名此场景中的操作。
瞧 - 您有一个完整的应用程序，
其中包含您想要的任意数量的表单，以及一个服务器脚本
和一个用于所有表单的FormController。
回答by Arraxas
Simpler:
更简单：
<input type="hidden" name="livraisonID" value="{{livraison.id}}"/>
It works!
有用！
回答by neela kanta
Use ng-binding="{{employee.data}}". It will work properly.
使用ng-binding="{{employee.data}}". 它会正常工作。
回答by Maximilian Eberl
I have to correct (improve) myself:
You can do it more elegantly:
我必须纠正（改进）自己：
你可以做得更优雅：
<form>
<input type="text" ng-model="formData.foo" />
<input type="hidden" id="bar" value="YourHiddenValue" />
<button ng-click="processForm()"> SUBMIT </button>
</form>
and then in the JavaScript controller:
然后在 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);
So you can have as many hidden fields as you like.
因此，您可以拥有任意数量的隐藏字段。
