2012-06-24 23 views
15

Gizli alanlara açısal olarak nasıl erişirim? Listedeki her bir öğe için bir form göndermek istediğim bir uygulamam var. Form basit - gönder düğmesine ve kimlik değerini tutan gizli bir alana sahip. Ama bu çalışmıyor. Değer boş.AngularJs'te gizli alanlar

Durumu görüntülemek için varsayılan açısal örneği güncelledim - yapılacaklar gizli alan içinde. daki basit Turp olarak

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

+0

sorunun daha basit bir örnek yapabilir misiniz Başlık ## düzgün çalışması ng bağlayıcı = kullanın? İşte bir temel keman: http://jsfiddle.net/andytjoslin/DkMyP/ –

+0

Elbette: http://jsfiddle.net/DkMyP/1/ –

cevap

2

sorun ng init kullanılarak veya kontrol olarak bir başlangıç ​​değeri ayarlanarak sabit olabilir. value özniteliği ng modelini etkilemez.

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

Ayrıca, ilk örnek (http://jsfiddle.net/tomasfejfar/yFrze/) Chrome'da şu anki durumunda benim için çalışıyor 15/Windows 7'de

+0

Ama bu sadece bir kez çalışır. Bir dahaki sefere değişken boş. –

+0

Ah, çünkü todoText ifadesinin “addTodo” işlevinde boş bir dizeye ayarlanmış olması gibi. –

+0

açıkçası! Kahretsin! : D Teşekkürler! : D –

8

istersen Kimliği ng-yinelemeden kodunuza geçirin, gizli bir alan kullanmanız gerekmez. İşte ne yaptım:

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

:

Örneğin en filmlere bir koleksiyon içinde döngü ediyorum diyelim ve bunu sizin JS koduna kimliğinizi geçecek bağlantısını "devamı" tıkladığınızda Daha sonra JS kodunuzda bu gibi bir kimlik alabilirsiniz:

+0

harika! teşekkürler: –

2

Böyle bir şey yapabilirsiniz.
Kirli bir hüner, ama gibi (çalışır en kirli hileler ;-)
Sadece Sizin gizli alan
olarak form adını kullanmak ve her zaman formu id "formu"

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

vermek Bu, TÜM formlar için ONE Controller kullanmanıza ve
'u ONE sunucu komut dosyasına göndermenize izin verir. Komut dosyası,
form adına (formData.foo) göre ayırır ve ne yapacağını bilir.
Gizli alan, bu senaryodaki işlemi adlandırır.

Voila - Sen istemek
gibi birçok formları ve
bir sunucu komut dosyası ve hepsi için tek bir FormController ile tam bir uygulama var.

0

kendimi düzeltmek (iyileştirmek) vardır: javascript Denetleyicisi sonra

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


ve:
Bunu daha şık yapabilirsiniz

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


Böylece, istediğiniz kadar çok gizli alana sahip olabilirsiniz.Eğer javascript dosyasında şey kodlamalısınız istemiyorsanız

13

, ya AJAX yükleyin, ya da yapabilirsiniz:

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

bu şekilde, JS ile formu işlevselliği kapalı tutabilir ve hala angularjs

+2

Kullanın: '' . Bu şekilde "model.value" olarak değişir, giriş değerinde güncellenir. – GFoley83

+1

model değerine gizli bir değer ayarlamanıza gerek yoktur, çünkü kullanıcı değişecek bir şey değildir. model değeri DOM – pocesar

+1

değiştirilmeden kapsamda tutulabilir Bir geri gönderme işleminde bu model değerine (veya bazı enterpolasyonlu değerlere) erişmek isterseniz ne olur? O zaman oldukça kullanışlı olur. Sadece gizli alanlar için başka bir kullanışlı kullanım durumunu vurguladım. – GFoley83

0

basit gizli alanını kullanın: çalışır

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

!

0

"{{employee.data}}" o ##