Cách AngularJS hiển thị hoặc ẩn phần tử biểu mẫu là gì?

Câu hỏi này đã được hỏi trên Danh sách gửi thư của Tami Wright ...Cách AngularJS hiển thị hoặc ẩn phần tử biểu mẫu là gì?

Tôi đang chuyển sang thế giới AngularJS từ JQuery và không hoàn toàn chắc chắn cách dịch một trường hợp sử dụng cụ thể không có trí tuệ trong JQuery. Trường hợp sử dụng đó cho phép/vô hiệu hóa hoặc ẩn/hiển thị các phần tử biểu mẫu dựa trên sự thay đổi của một phần tử được chọn trong cùng một biểu mẫu. Bất kỳ ý tưởng/gợi ý/con trỏ bất cứ ai sẽ sẵn sàng chia sẻ để giúp tôi có được điều này làm việc?

Và đối với một ý tưởng về những gì tôi đang cố gắng để làm ở đây là một số mã để minh họa:

$('#ddl').change(function (e) { 
       var selectedValue = $(this).val(); 
       switch(selectedValue){ 
        case 1: 
         // Hide/show or enable/disable form elements here with Javascript or Jquery 

// Sample enable code 
      document.getElementById("username").readOnly = false; 
      document.getElementById("username").style.background = "transparent"; 
      document.getElementById("username").style.color = "#000000"; 


// Sample disable code 
      document.getElementById("first_name").readOnly = true; 
      document.getElementById("first_name").style.color = "#c0c0c0"; 
            break;   
       } 
       return false; 
      });

Cảm ơn bạn trước,

Tami Wright

Nguồn

2012-11-08 Pete BD

Một trong những thiết kế lớn mục tiêu của AngularJS là cho phép các nhà phát triển ứng dụng xây dựng các ứng dụng web với ít hoặc không có thao tác trực tiếp nào của DOM. Trong nhiều trường hợp điều này cũng dẫn đến một phong cách khai báo nhiều hơn nữa. Điều này cho phép logic nghiệp vụ dễ dàng được kiểm tra đơn vị và làm tăng đáng kể tốc độ mà tại đó bạn có thể phát triển các ứng dụng.

Hầu hết mọi người đến từ nền jQuery đều có chút khó khăn trong việc phát triển dựa trên thao tác DOM và đặc biệt sử dụng DOM làm mô hình miền ứng dụng của họ.

AngularJS thực sự tạo ra nếu rất dễ thay đổi diện mạo của các yếu tố đầu vào dựa trên sự kiện của người dùng hoặc thay đổi dữ liệu. Đây là một ví dụ về cách vấn đề trên có thể đạt được.

Dưới đây là bản demo làm việc: http://plnkr.co/edit/zmMcan?p=preview

<html ng-app> 
<head> 
    ... 
    <style type="text/css"> 
    .disabled { 
     color: #c0c0c0; 
     background: transparent; 
    } 
    </style> 
</head> 
<body ng-init="isEnabled=true"> 

    <select ng-model="isEnabled" ng-options="choice == 'Enabled' as choice for choice in ['Enabled', 'Disabled']"></select><br> 

    User Name: <input ng-model="userName" ng-readonly="!isEnabled" ng-class="{ disabled: !isEnabled }"><br> 
    First Name: <input ng-model="firstName" ng-readonly="!isEnabled" ng-class="{ disabled: !isEnabled }"> 
</body>

Bạn có thể thấy rằng thay vì viết mã bắt buộc, chúng tôi có thể tuyên bố rằng các lớp và các thuộc tính readonly của đầu vào được ràng buộc với giá trị của lựa chọn. Điều này có thể được tăng cường với tính toán phức tạp của các giá trị trong một bộ điều khiển nếu bạn muốn.

Nguồn

2012-11-08 11:24:55

+1. Đánh giá cao nỗ lực của bạn để trả lời câu hỏi về SO. – SunnyShah

tôi cũng khuyên bạn nên sử dụng ng-hide hoặc ng-show làm tiểu bang trong tài liệu góc cạnh https://docs.angularjs.org/api/ng/directive/ngHide – Skary

Tôi thích ví dụ và giải thích của bạn. Bạn không nghĩ rằng chúng tôi đang chuyển trở lại một loại "javascript khó chịu" hiện đại một lần nữa? –

Từ AngularJS tài liệu chính thức về directives:

Chỉ là một cách để dạy HTML thủ đoạn mới. Trong các chỉ thị biên dịch DOM được so khớp với HTML và được thi hành. Điều này cho phép các chỉ thị đăng ký hành vi hoặc chuyển đổi DOM.

Góc đi kèm với bộ chỉ lệnh hữu ích để xây dựng các ứng dụng web nhưng có thể được mở rộng sao cho HTML có thể được chuyển thành ngôn ngữ cụ thể của miền khai báo (DSL).

Để bật/tắt đầu vào, cách dễ nhất trong AngularJS là sử dụng chỉ thị ngDisabled sau đây. Để hiển thị/ẩn các phần tử, hãy sử dụng các chỉ thị ngShow và ngHide sau

AngularJS có các ví dụ hay cho tất cả các yếu tố này.

Nguồn

2013-01-13 21:37:28 Guy

Cách AngularJS hiển thị hoặc ẩn phần tử biểu mẫu là gì?

Trả lời

Các vấn đề liên quan