Web Design

Angularjs, Bài 6: Giới thiệu về ngShow, ngHide, ngRepeat và filter

Trong bài trước thì tôi có nói sơ lược về ngRepeat dưới dạng ví dụ. Lần này, tôi sẽ giải thích thêm về ngRepeat cũng như kết hợp giữa nó và filter. Nhưng trước hết, chúng ta hãy tìm hiểu về ngShow cũng như directive đối lập với nó là ngHide.

AngularJS

1. ngShow và ngHide.

Cái tên dường như đã nói lên tất cả, ngShow sẽ show, tức “cho hiện”, một element hay một nhóm elements nếu (chúng) thỏa một điều kiện nào đó. Còn nếu không thỏa mãn thì element hoặc nhóm elements đó sẽ được ẩn đi (hidden). Ngược tại, ngHide sẽ cho ẩn element(s) nếu thỏa điều kiện đó và không ẩn nếu không thỏa. Ta xét ví dụ đơn giản bên dưới:

Như bạn có thể hình dung, thẻ <p>You entered EITGUIDE</p> sẽ được hiển thị nếu bạn nhập “eitguide” (không phân biệt hoa thường) vào ô <input> bên trên và sẽ ẩn đi nếu chuỗi kí tự được nhập không phải là “eitguide”, cho dù là “eitguid” hay “eitguides” thì tên <p> cũng không hiện ra, mà phải đúng là “eitguide” thì bạn mới thấy nó. Ngược lại là ngHide. Đoạn dưới đây cho kết quả tương đương, nhưng directive được dùng là ngHide.

Bạn cũng có thể kết hợp các điều kiện lại với nhau theo kiểu && cũng như ||.

2. ngRepeat

ngRepeat có tác dụng đúng như tên gọi của nó, là lặp lại một đoạn plain text hay một đoạn HTML theo một mục đích nào đó. Chẳng hạn, tôi có một array như bên dưới, và xin lưu ý, nó chỉ là một đoạn code trích ngang. Thực tế nó phải nằm trong $scope của một Controller:

Bây giờ, tôi muốn in các phần tử của mảng trên ra dưới các tag <li>. Theo cách đời thường nhất, “mới học” nhất, tôi sẽ phải viết đúng 5 tên <li> ra. Nhưng lỡ sau này sếp tôi yêu cầu tôi thêm 200 phần tử nữa vào mảng trên, thì tôi sẽ phải cóp pát bằng tay thêm 200 lần nữa. Nâng tầm lên một chút, tôi đã có kha khá kiến thức về JS cơ bản rồi, thì tôi sẽ phải dùng vòng lặp duyệt mảng trên, rồi dùng var li = document.createElement(“li”) rồi gán textContent cho nó ứng với mỗi phần tử trong mảng, và cuối cùng là append nó vào nơi nó phải xuất hiện. Cách này cũng khá, nhưng sẽ phải mất công đi refresh lại cái DOM hoặc chí ít là kiểm tra phần tử đã được in chưa để có phải in nó hay không rồi mới tiến hành in ra. Đoán biết được nhu cầu này, AngularJS có một directive rất hữu hiệu là ngRepeat. Thay vì viết mấy 205 dòng trong HTML hay gần 20 dòng trong JS, tôi chỉ mất có 1 dòng cỏn con trong HTML mà thôi. Chẳng hạn:

Và sau này, tôi sẽ thoải mái thêm 2000 phần tử nữa vào items thì nó cũng vẫn in chính xác ra đó. Một điều rất hay nữa là vì nhờ two-way data binding (ràng buộc dữ liệu hai chiều) của AngularJS, tôi có thể thêm trực tiếp phần tử vào items và phần HTML sẽ được cập nhật lại ngay lập tức – bạn đã không còn lạ lùng gì về thế mạnh này rồi – mà không cần refresh cả cái trang. Quá ngọt canh ngon cơm! Trước khi kết thúc phần này, tôi xin nhấn mạnh cú pháp của ng-repeat là “phần-tử in mảng-chứa”, trong đó mảng-chứa là biến mà bạn định nghĩa trong Controller – có thể nằm trong HTML hoặc JS là tùy bạn, nếu là JS thì phải có $scope; còn phần-tử có tên gì cũng được, do bạn tùy ý chọn, nhưng một khi đã chọn rồi thì phải cố định nó, khi dùng thì phải lấy đúng tên nó ra mà dùng. Chẳng hạn, tôi “thích” thì tôi đổi phần HTML lại thành dư lầy và Mĩ cũng không lấy cớ đó mà sẽ bỏ bom Bắc Kinh:

Tôi thay “item” bằng “x”, và khi dùng thì tôi lấy tên “x” đó ra. Nếu “đầu đuôi không khớp”, chẳng hạn:

thì AngularJS sẽ la oai oái rằng “item là cái con cá con tôm gì vậy?”, và bạn hãy bình tĩnh mà tìm chỗ sai mà gỡ, đừng có post vấn đề nhỏ như con thỏ đang ăn cỏ bị thằng da đỏ ghét bắn bỏ này lên hàng loạt các forums của những cao nhân râu dài tới gối. Ăn hành như chơi.

3. Filter

Thực tế thì người ta ít khi dùng ngRepeat chỉ để in các phần tử trong mảng ra theo hướng thuần túy như ví dụ bên trên, mà hay kết hợp với các điều kiện cụ thể, đặc biệt là khi bạn có một dãy các phần tử và cho người dùng duyệt mảng dưới dạng tìm kiếm. Giả sử bây giờ tôi đưa vào một khung tìm kiếm ngay phía trên tên <ul>:

Hiện tại thì hai tên <input> và <ul> vẫn chưa có sự liên kết nào. Các phần tử của item cứ hiện ra đó mặc kệ là bạn nhập gì trong ô input. Để những tên <li> nhìn theo <input> thì bạn sẽ thêm filter vào ng-repeat, và ở giữa các điều kiện của ng-repeat, bạn luôn có “dải phân cách” là một kí tự | (tiếng Anh là pipe):

Bạn có để ý không, sau filter: sẽ là tên của ng-model sẽ đứng ra làm điều kiện để lọc, ở đây là ng-model của tên input có tên query do tôi đặt. Ý tưởng sẽ là ng-repeat sẽ filter mảng được cho theo ng-model được chỉ định. Và bắt buộc bạn phải sử dụng ngModel ở đây, thay cho “Mình đặt id cho input rồi dùng nó được không?”. Dùng ngModel đi, không phải xoắn và thực chất nó cũng đơn giản mà.

4. Kết hợp ngShow, ngRepeat và Filter:

Bây giờ tôi sẽ nâng level lên một chút, cỡ tầm gặp Boss thứ nhất. Items array của chúng ta sẽ không còn đơn giản nữa mà sẽ lợi hại hơn mấy phần như bên dưới:

Mission của chúng ta là sẽ chỉ cho hiện và filter các cty ở chỉ Mẽo mà thôi. Do đó, tôi sẽ đính kèm một tên ng-show vào <li> ngay sau ng-repeat:

Như vậy là danh sách chỉ hiện các cty có location ở US và sẽ tiến hành filter theo từ khóa mà bạn nhập vào ô input. Các cty ở VN sẽ không được hiển thị. Còn nếu bạn muốn đổi sang VN thì hãy thay ‘US’ trong ng-show thành ‘VN’ mà thôi. Và để nâng cao, mài dũa tay nghề, trong thời gian chờ đợi bài tiếp theo là về ngSrc và ngHref, bạn hãy thêm 2 radio input là US và VN để có thể filter linh động hơn?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.