AngularJS, văn bản đầu vào rõ ràng với nút

Question

Sử dụng AngularJS, cách thích hợp để xóa giá trị của trường văn bản là gì? Tôi có một lĩnh vực đầu vào với một nút bên cạnh nó. Người dùng nhập vào nó và nhấn nút để xóa hoặc đặt lại.

Tôi biết tôi có thể thêm sự kiện ng-click trên chính nút và gọi hàm, nhưng tôi không chắc đó là cách chính xác để thực hiện.

Ngay bây giờ tất cả tôi có là:

<input type="text" ng-model="searchQuery" /> 
<button class="btn" <!--do something here maybe?-->> 
    <i class="icon-search" ng-class="{'icon-refresh': searchQuery.length}"></i> 
</button> 

Answer 1

ng-click là "góc" cách để làm điều đó

chỉ cần khai báo một hàm trong phạm vi của bạn và gắn nó vào của nút ng-click

Nếu bạn muốn một cái gì đó tiên tiến hơn, thì "Đường góc" gợi ý tạo một chỉ thị để bọc chức năng bạn muốn và đính kèm nó vào nút của bạn (tùy thuộc vào cách bạn cấy ement chỉ thị của bạn)

Nếu bạn muốn có một ví dụ, hãy cho tôi biết trong các ý kiến ​​

Answer 2

Tôi đã có cùng một vấn đề. Có lẽ đơn giản là tốt nhất?

Không cần gọi phương thức trong bộ điều khiển. Không cần chỉ thị. Chỉ cần một tuyên bố ngắn gọn để xóa mô hình mà bạn đã khai báo trong thẻ đầu vào. Như thế này:

<input ng-model="searchQuery"> 
<button class="btn" ng-click="searchQuery = ''"></button> 

Bạn cũng có thể ẩn các nút rõ ràng khi không có văn bản trong đầu vào, như thế này:

<button class="btn" ng-show="searchQuery.length" ...></button> 

Bằng cách này, có thể là một chỉ thị đó sẽ đặt nút rõ ràng bên trong của hộp đầu vào sẽ là tốt đẹp. Một cái gì đó như bạn thấy trên iPhone.