Скрытые поля в AngularJs

Как мне получить доступ к скрытым полям в angular? У меня есть приложение, где я хочу отправить форму для каждого из элементов в списке. Форма проста - кнопка отправки и скрытое поле содержат значение идентификатора. Но это не работает. Значение пусто.

Я обновил пример по умолчанию angular, чтобы отобразить ситуацию - текст todo находится в скрытом поле.

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

Ответы

Ответ 1

В вашей более простой скрипте проблему можно устранить с помощью ng-init или установки начального значения в контроллере. Атрибут value не будет влиять на ng-модель.

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

Кроме того, ваш первоначальный пример (http://jsfiddle.net/tomasfejfar/yFrze/) работает для меня в текущем состоянии в Chrome 15/Windows 7.

Ответ 2

Если вы не хотите записывать что-либо в свой файл javascript, вы можете загрузить его через AJAX или сделать:

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

Таким образом, вы можете сохранить функциональность формы с выключенным JS и по-прежнему использовать скрытое поле в AngularJS

Ответ 3

если вы хотите передать идентификатор из ng-repeat в свой код, вам не нужно использовать скрытое поле. Вот что я сделал:

Например, скажем, я просматриваю коллекцию фильмов, и когда вы нажимаете ссылку "читать дальше", она передает ваш идентификатор вашему JS-коду:

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

Затем в вашем JS-коде вы можете получить идентификатор:

$scope.movieDetails = function (movie) {
  var movieID = movie.id;
}

Ответ 4

Вы можете сделать что-то вроде этого.
Это грязный трюк, но он работает (как и большинство грязных трюков;-)
Вы просто используете имя формы как свое скрытое поле
и всегда указывать форму "форма" 

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

Это позволяет использовать ONE Controller для всех форм и отправлять
их на один сервер script. script чем отличается
имя формы (formData.foo) и знает, что делать.
Скрытое поле называет операцию в этом сценарии.

Voila - у вас есть полное приложение с
многие формы, которые вы хотите, и один сервер script
и один FormController для всех из них.

Ответ 5

Я должен сам исправить (улучшить):
Вы можете сделать это более элегантно: 

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


Таким образом, вы можете иметь столько скрытых полей, сколько захотите.

Ответ 6

Simpler:

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

Это работает!

Ответ 7

Пожалуйста, используйте ng-binding = "{{employee.data}}" он будет работать правильно ## Заголовок ##