Come accedere ai campi nascosti in modo angolare? Ho un'app, dove voglio inviare un modulo per ciascuno degli elementi nell'elenco. Il modulo è semplice: ha un pulsante di invio e un campo nascosto che contiene il valore dell'ID. Ma non funziona. Il valore è vuoto.Campi nascosti in AngularJs
Ho aggiornato l'esempio angolare predefinito per visualizzare la situazione: il testo di Todo si trova nel campo nascosto.
http://jsfiddle.net/tomasfejfar/yFrze/
Nel vostro violino più semplice, il problema può essere risolto utilizzando ng-init o l'impostazione di un valore iniziale nel controller. L'attributo value non influisce sul modello ng.
http://jsfiddle.net/andytjoslin/DkMyP/2/
Inoltre, il vostro esempio iniziale (http://jsfiddle.net/tomasfejfar/yFrze/) funziona per me nel suo stato attuale su Chrome 15/Windows 7.
Ma funziona solo una volta. La prossima volta che la variabile è vuota. –
Ah, questo è perché nell'esempio di esempio 'todoText' è impostato su una stringa vuota nella funzione' addTodo'. –
ovviamente! Oh merda! : D Grazie! : D –
se si desidera passare l'ID dalla ng-repeat al codice, non è necessario utilizzare un campo nascosto. Ecco quello che ho fatto:
Per esempio diciamo che sto scorrendo una collezione di film, e quando si fa clic sul "leggi tutto" collegamento passerà il proprio ID al codice JS:
<ul>
<li ng-repeat="movie in movies">
{{movie.id}} {{movie.title}} <a href="#" ng-click="movieDetails(movie)">read more</a>
</li>
</ul>
poi nel codice JS, è possibile ottenere l'ID in questo modo:
$scope.movieDetails = function (movie) {
var movieID = movie.id;
}
fantastico! grazie –
si può fare qualcosa di simile.
è un trucco sporco, ma funziona (come la maggior parte trucchi sporchi ;-)
Basta usare il nome del modulo come il tuo campo nascosto
e sempre dare la forma l'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>
Ciò consente di utilizzare UN Controller per TUTTI i moduli e inviare
a uno script di server. Lo script si distingue per il nome del modulo
(formData.foo) e sa cosa fare.
Il campo nascosto indica l'operazione in questo scenario.
Voila - Hai un'applicazione completa con il
molte forme che si desidera e uno script server
e uno FormController per tutti loro.
devo correggere (migliorare) me:
si può fare più elegante:
<form>
<input type="text" ng-model="formData.foo" />
<input type="hidden" id="bar" value="YourHiddenValue" />
<button ng-click="processForm()"> SUBMIT </button>
</form>
e poi nel 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);
Quindi puoi avere quanti campi nascosti vuoi.
Se non si desidera hardcode nulla nel file javascript, è possibile caricarlo tramite la tecnologia AJAX, o fare:
<input type="hidden" name="value" ng-init="model.value=1" value="1">
in questo modo, è possibile mantenere la funzionalità di modulo con JS off, e ancora utilizzare il campo nascosto in AngularJS
Usa: '' . In questo modo le modifiche a 'model.value' verranno aggiornate nel valore di input. – GFoley83
non è necessario impostare un valore nascosto per il valore del modello, poiché non è qualcosa che l'utente cambierà. il valore del modello può essere mantenuto nell'ambito senza alterare il DOM – pocesar
Cosa fare se si desidera accedere a quel valore del modello (o qualche valore interpolato) in un postback? Sarebbe molto utile allora. Sto solo evidenziando un altro caso d'uso utile per i campi nascosti. – GFoley83
Più semplice:
<input type="hidden" name="livraisonID" value="{{livraison.id}}"/>
funziona!
Utilizzare = NG-binding "{{}} employee.data" funzionerà correttamente ## Rubrica ##
Potrebbe fare un esempio più semplice del problema? Ecco un gioco base: http://jsfiddle.net/andytjoslin/DkMyP/ –
Ovviamente: http://jsfiddle.net/DkMyP/1/ –