Làm cách nào để truy cập các trường ẩn trong góc? Tôi có một ứng dụng, nơi tôi muốn gửi biểu mẫu cho từng mục trong danh sách. Biểu mẫu đơn giản - nó có nút gửi và một trường ẩn chứa giá trị ID. Nhưng nó không hoạt động. Giá trị trống.Các trường ẩn trong AngularJs
Tôi đã cập nhật ví dụ góc mặc định để hiển thị trường hợp - văn bản cần làm nằm trong trường bị ẩn.
http://jsfiddle.net/tomasfejfar/yFrze/
Trong fiddle đơn giản của bạn, vấn đề có thể được cố định bằng cách sử dụng ng-init hoặc thiết lập một giá trị ban đầu trong bộ điều khiển. Thuộc tính value sẽ không ảnh hưởng đến mô hình ng.
http://jsfiddle.net/andytjoslin/DkMyP/2/
Ngoài ra, ví dụ ban đầu của bạn (http://jsfiddle.net/tomasfejfar/yFrze/) làm việc cho tôi trong trạng thái hiện tại của nó trên Chrome 15/Windows 7.
Nhưng nó chỉ hoạt động một lần. Lần tới biến này trống. –
Ah, đó là bởi vì trong ví dụ todo 'todoText' được đặt thành một chuỗi trống trong hàm' addTodo'. –
hiển nhiên! chết tiệt! : D Cảm ơn! : D –
nếu bạn muốn chuyển ID từ ng-repeat sang mã của bạn, bạn không phải sử dụng trường ẩn. Dưới đây là những gì tôi đã làm:
Ví dụ giả sử tôi đang lặp thông qua một bộ sưu tập các bộ phim, và khi bạn nhấp vào "đọc thêm" liên kết nó sẽ vượt qua ID của bạn để mã JS của bạn:
<ul>
<li ng-repeat="movie in movies">
{{movie.id}} {{movie.title}} <a href="#" ng-click="movieDetails(movie)">read more</a>
</li>
</ul>
Sau đó, trong mã JS, bạn có thể nhận được ID như sau:
$scope.movieDetails = function (movie) {
var movieID = movie.id;
}
tuyệt vời! thanks –
Bạn có thể làm điều gì đó như thế này.
Đây là một thủ thuật bẩn, nhưng nó hoạt động (giống như hầu hết thủ đoạn bẩn ;-)
Bạn chỉ cần sử dụng tên mẫu là lĩnh vực tiềm ẩn của bạn
và luôn luôn cung cấp cho các hình thức id "hình thức"
<!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>
Điều này cho phép Bạn sử dụng MỘT Bộ điều khiển cho TẤT CẢ biểu mẫu và gửi
chúng tới MỘT kịch bản máy chủ. Tập lệnh hơn phân biệt với tên
biểu mẫu (formData.foo) và biết phải làm gì.
Trường ẩn đặt tên cho hoạt động trong trường hợp này.
Thì đấy - Bạn có đơn đăng ký đầy đủ với
nhiều biểu mẫu Bạn muốn và một tập lệnh máy chủ
và một FormController cho tất cả chúng.
tôi phải sửa (cải thiện) bản thân mình:
Bạn có thể làm điều đó tao nhã hơn:
<form>
<input type="text" ng-model="formData.foo" />
<input type="hidden" id="bar" value="YourHiddenValue" />
<button ng-click="processForm()"> SUBMIT </button>
</form>
và sau đó trong 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);
Vì vậy, bạn có thể có bao nhiêu trường ẩn theo ý muốn.
Nếu bạn không muốn bất cứ điều gì hardcode trong file javascript của bạn, bạn có thể tải nó qua AJAX, hay làm:
<input type="hidden" name="value" ng-init="model.value=1" value="1">
Bằng cách này, bạn có thể giữ các chức năng hình thức với JS tắt, và vẫn sử dụng trường ẩn trong AngularJS
Sử dụng: '' . Cách này thay đổi thành 'model.value' sẽ được cập nhật trong giá trị đầu vào. – GFoley83
không cần thiết lập giá trị ẩn cho giá trị mô hình vì nó không phải là thứ mà người dùng sẽ thay đổi. giá trị mô hình có thể được giữ trong phạm vi mà không thay đổi DOM – pocesar
Điều gì xảy ra nếu bạn muốn truy cập vào giá trị mô hình đó (hoặc một số giá trị nội suy) trong một bài đăng? Nó sẽ khá tiện dụng sau đó. Tôi chỉ đánh dấu một trường hợp sử dụng hữu ích khác cho các trường ẩn. – GFoley83
đơn giản:
<input type="hidden" name="livraisonID" value="{{livraison.id}}"/>
Nó hoạt động!
Vui lòng sử dụng = ng-ràng buộc "{{employee.data}}" nó sẽ hoạt động đúng ## Nhóm ##
bạn có thể làm một ví dụ đơn giản của vấn đề? Đây là một fiddle cơ bản: http://jsfiddle.net/andytjoslin/DkMyP/ –
Tất nhiên: http://jsfiddle.net/DkMyP/1/ –