Jak uzyskać dostęp do ukrytych pól pod kątem? Mam aplikację, w której chcę przesłać formularz dla każdej pozycji na liście. Formularz jest prosty - ma przycisk przesyłania i ukryte pole zawierające wartość identyfikatora. Ale to nie działa. Wartość jest pusta.Ukryte pola w AngularJs
Zaktualizowałem domyślny przykład kątowy, aby wyświetlić sytuację - tekst todo znajduje się w ukrytym polu.
http://jsfiddle.net/tomasfejfar/yFrze/
W swojej prostszej ryba, problem można rozwiązać za pomocą ng-startowych lub ustawienie wartości początkowej w kontrolerze. Atrybut value nie wpłynie na model ng.
http://jsfiddle.net/andytjoslin/DkMyP/2/
Również początkowy przykład (http://jsfiddle.net/tomasfejfar/yFrze/) działa na mnie w swoim obecnym stanie Chrome 15/Windows 7.
Ale to działa tylko raz. Następnym razem zmienna jest pusta. –
Ah, ponieważ w todo przykład 'todoText' jest ustawiony na pusty łańcuch w funkcji' addTodo'. –
oczywiście! o kurcze! : D Dzięki! : D –
jeśli chcesz przekazać identyfikator z ng-repeat do swojego kodu, nie musisz używać ukrytego pola. Oto co zrobiłem:
Na przykład załóżmy, że jestem przelotowego kolekcją filmów, a po kliknięciu „czytaj więcej” Link to minie swój identyfikator do kodu JS:
<ul>
<li ng-repeat="movie in movies">
{{movie.id}} {{movie.title}} <a href="#" ng-click="movieDetails(movie)">read more</a>
</li>
</ul>
Następnie w swoim kodzie JS możesz uzyskać identyfikator podobny do tego:
$scope.movieDetails = function (movie) {
var movieID = movie.id;
}
niesamowite! dzięki –
Możesz zrobić coś takiego.
Jest to świństwo, ale działa (jak większość brudnych sztuczek ;-)
po prostu użyć nazwę formularza jako swoje ukryte pola
i zawsze dać postaci z id „forma”
<!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>
Pozwala to na użycie JEDNEGO sterownika dla wszystkich formularzy i wysłanie
ich do JEDNEGO skryptu serwera. Skrypt różni się od nazwy formularza
(formData.foo) i wie, co zrobić.
Ukryte pole określa operację w tym scenariuszu.
Voila - Masz kompletny wniosek z AS
wielu formach chcesz i jednego skryptu serwera
i jednego FormController dla nich wszystkich.
muszę skorygować (poprawić) sobie:
Można zrobić to bardziej eleganckie:
<form>
<input type="text" ng-model="formData.foo" />
<input type="hidden" id="bar" value="YourHiddenValue" />
<button ng-click="processForm()"> SUBMIT </button>
</form>
a następnie w kontrolerze 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);
Możesz więc mieć tyle ukrytych pól, ile chcesz.
Jeśli nie chcesz hardcode cokolwiek w pliku JavaScript, możesz albo załadować go za pośrednictwem AJAX, czy:
<input type="hidden" name="value" ng-init="model.value=1" value="1">
ten sposób można zachować funkcjonalność formularz z JS wyłączona, a nadal korzystać z pola ukrytego w angularjs
Użyj: '
nie ma potrzeby ustawiania ukrytej wartości wartości modelu, ponieważ nie jest to coś, co zmieni użytkownik. wartość modelu może być zachowana w zakresie bez zmiany DOM – pocesar
Co jeśli chcesz uzyskać dostęp do wartości tego modelu (lub jakiejś wartości interpolowanej) w odsyłaniu? Byłoby wtedy bardzo poręczne. Po prostu podkreślam inny użyteczny przypadek użycia ukrytych pól. – GFoley83
Prostsze:
<input type="hidden" name="livraisonID" value="{{livraison.id}}"/>
to działa!
Proszę używać NG-wiązania = "{{employee.data}}" to będzie działać prawidłowo ## dział ##
można zrobić prostszy przykład problemu? Oto podstawowe skrzypce: http://jsfiddle.net/andytjoslin/DkMyP/ –
Oczywiście: http://jsfiddle.net/DkMyP/1/ –