Làm thế nào để trì hoãn việc cập nhật liên kết trong khi người dùng đang nhập liệu?

Thêm ng-model-options, ví dụ: ng-model-options="{ debounce: 500 }". AngularJS sau đó sẽ đợi nửa giây sau lần nhấn phím cuối cùng trước khi cập nhật mô hình, điều này hữu ích cho các ô tìm kiếm kích hoạt yêu cầu.

Cách sử dụng “ng-model” trong AngularJS với VÍ DỤ

⚡ Tóm tắt thông minh

ng-model trong AngularJS liên kết trực tiếp một điều khiển đầu vào với một thuộc tính trên $scope, giữ nguyên như vậy.ping Chế độ xem và mô hình được đồng bộ hóa theo cả hai hướng. Các phần bên dưới đề cập đến thuộc tính, ba ví dụ thực tế và những lỗi mà người mới bắt đầu thường gặp nhất.

🔗 Cấu trúc đóng gáy hai chiều: ng-model đẩy dữ liệu người dùng nhập vào thuộc tính $scope và tự động đẩy các thay đổi của controller trở lại control.
📝 Liên kết vùng văn bản: Liên kết một chuỗi nhiều dòng với một vùng văn bản và sử dụng chuỗi thoát \n để buộc xuống dòng trong giá trị được hiển thị.
☑️ Trạng thái hộp kiểm: Hộp kiểm được liên kết với ng-model lưu trữ một giá trị boolean, vì vậy giá trị true sẽ khiến hộp kiểm được chọn và false sẽ khiến hộp kiểm không được chọn.
📋 Danh sách thả xuống: Điền dữ liệu vào phần tử select bằng ng-options và liên kết mục đã chọn với một thuộc tính riêng biệt của mô hình.
⚠️ Lỗi thường gặp: Việc liên kết một phần tử chọn với cùng một đối tượng cung cấp văn bản tùy chọn của nó sẽ ghi đè lên đối tượng đó trong lần chọn đầu tiên.
🛠️ Các Hook xác thực: ng-model thêm các lớp ng-pristine, ng-dirty, ng-valid và ng-invalid để điều khiển kiểu dáng có điều kiện và kiểm tra biểu mẫu.

Đọc thêm

Mô hình ng trong AngularJS là gì?

`ng-model` là một directive trong AngularJS đại diện cho model, và mục đích chính của nó là liên kết "view" với "model". Bất cứ thứ gì người dùng nhập vào một control đều được ghi trực tiếp vào một thuộc tính trên `ng-model`. $scopevà bất cứ thứ gì bộ điều khiển ghi vào thuộc tính đó sẽ được đẩy thẳng trở lại vào bộ điều khiển.

Ví dụ, giả sử bạn muốn hiển thị một trang đơn giản cho người dùng cuối như hình bên dưới, yêu cầu người dùng nhập "Tên" và "Họ" vào các ô văn bản. Và sau đó bạn muốn đảm bảo rằng thông tin người dùng đã nhập được lưu trữ trong mô hình dữ liệu của bạn.

Bạn có thể sử dụng chỉ thị `ng-model` để ánh xạ các trường hộp văn bản "Tên" và "Họ" vào mô hình dữ liệu của mình. Chỉ thị này sẽ đảm bảo dữ liệu trong "view" và dữ liệu trong "model" luôn được đồng bộ, mà không cần bất kỳ dòng mã xử lý sự kiện nào.

⚠️ Lưu ý về phiên bản: AngularJS (nhánh 1.x) đã hết hạn hỗ trợ vào ngày 31 tháng 12 năm 2021 và không còn nhận được các bản vá bảo mật nữa. Các ví dụ dưới đây vẫn chạy được, nhưng trong Angular hiện đại, liên kết hai chiều tương tự được viết như sau: [(ngModel)] và yêu cầu FormsModule.

Thuộc tính ng-model

Như đã thảo luận ở phần trên, thuộc tính ng-model được sử dụng để liên kết dữ liệu trong mô hình của bạn với giao diện hiển thị cho người dùng.

Thuộc tính ng-model được sử dụng cho,

Liên kết các điều khiển như ô nhập liệu, vùng văn bản và các phần tử chọn trong khung nhìn vào mô hình.
Cung cấp chức năng xác thực — ví dụ, có thể thêm chức năng xác thực vào hộp văn bản để chỉ cho phép nhập các ký tự số.
Duy trì trạng thái của bộ điều khiển. Trạng thái ở đây có nghĩa là bộ điều khiển và dữ liệu luôn được giữ đồng bộ: nếu giá trị của dữ liệu thay đổi, giá trị trong bộ điều khiển sẽ tự động thay đổi và ngược lại.
Hiển thị trạng thái đó dưới dạng các lớp CSS. AngularJS bổ sung thêm ng-pristine, ng-dirty, ng-valid và ng-invalid cho mọi điều khiển mang thuộc tính ng-model, điều này giúp việc tạo kiểu có điều kiện cho các biểu mẫu trở nên đơn giản.

Sau khi đã hiểu rõ thuộc tính này, bước tiếp theo là áp dụng nó cho ba loại điều khiển mà bạn sẽ gặp thường xuyên nhất.

Cách sử dụng mô hình ng

1) Vùng văn bản

Thẻ vùng văn bản được sử dụng để xác định điều khiển nhập văn bản nhiều dòng. Vùng văn bản có thể chứa số lượng ký tự không giới hạn và văn bản hiển thị ở phông chữ có chiều rộng cố định.

Bây giờ chúng ta hãy xem một ví dụ đơn giản về cách thêm chỉ thị ng-model vào điều khiển vùng văn bản. Trong ví dụ này, chúng ta muốn minh họa cách truyền một chuỗi nhiều dòng từ bộ điều khiển đến giao diện người dùng và gán giá trị đó cho điều khiển vùng văn bản.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.js"></script>
</head>
<body>
<h1>Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
    <form>
        Topic Description:<br><br>
        <textarea rows="4" cols="50" ng-model="pDescription"></textarea>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', []);
    app.controller('DemoCtrl', function($scope) {
        $scope.pDescription = "This topic looks at how Angular JS works \nModels in Angular JS";
    });
</script>
</body>
</html>

Code Giải thích:

chỉ thị ng-model gắn biến thành viên có tên là “p”Description” đến điều khiển “textarea”. “pDescriptBiến “ion” chứa văn bản được truyền đến điều khiển vùng văn bản. rows="4" và cols="50" Các thuộc tính chỉ đơn giản là điều chỉnh kích thước của điều khiển sao cho văn bản nhiều dòng được hiển thị đúng cách.
Biến thành viên “pDescriptIon” được gán giá trị nhiều dòng. \n Chuỗi thoát bên trong chuỗi ký tự là thứ buộc văn bản phải xuống dòng thứ hai khi vùng văn bản hiển thị nó.

Đầu ra:

Từ kết quả hiển thị, rõ ràng là văn bản nhiều dòng được gán trong bộ điều khiển được hiển thị trong vùng văn bản, bị chia thành hai dòng chính xác tại vị trí đó. \n ngồi

2) Yếu tố đầu vào

Chỉ thị ng-model cũng hoạt động với các phần tử input thông thường. Dưới đây, chúng ta liên kết đồng thời một hộp văn bản và hai hộp kiểm, để bạn có thể thấy ng-model xử lý giá trị chuỗi và giá trị boolean cạnh nhau như thế nào.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.js"></script>
</head>
<body>
<h1>Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
    <form>
        Topic Description:<br><br>
        Name : <input type="text" ng-model="pname"><br>
        Topic :<br>
        <input type="checkbox" ng-model="Topic.Controller">Controller<br>
        <input type="checkbox" ng-model="Topic.Models">Models
    </form>
</div>

<script>
    var app = angular.module('DemoApp', []);
    app.controller('DemoCtrl', function($scope) {
        $scope.pname = "Guru99";

        $scope.Topic = {
            Controller: true,
            Models: false
        };
    });
</script>
</body>
</html>

Code Giải thích:

Chỉ thị ng-model gắn biến thành viên “pname” vào điều khiển nhập văn bản và các thuộc tính. Topic.Controller và Topic.Models đến hai ô kiểm.
Trong bộ điều khiển, “pname” được gán chuỗi “Guru99”, và đối tượng “Topic” được cung cấp hai thành viên kiểu boolean. Một hộp kiểm được liên kết với ng-model luôn đọc và ghi một giá trị boolean, đó là lý do tại sao true hiển thị ô đó ở trạng thái đã được chọn và false Điều đó thật rõ ràng.

Đầu ra:

Từ đầu ra,

Có thể thấy rõ ràng rằng giá trị được gán cho pname biến là “Guru99. "
Vì giá trị ràng buộc đầu tiên là trueÔ checkbox được đánh dấu cho tùy chọn “Controller”. Tương tự, vì giá trị thứ hai là falseÔ chọn "Models" chưa được đánh dấu.

3) Chọn phần tử từ Dropdown

Chỉ thị ng-model cũng có thể được áp dụng cho phần tử select, để mục mà người dùng chọn được lưu trữ trong model.

Ở đây chúng ta sẽ có một ô nhập văn bản chứa tên “Guru99”, và một danh sách chọn với hai mục, “Bộ điều khiển” và “Mô hình”.

⚠️ Đính chính: Ảnh chụp màn hình phía trên hiển thị danh sách gốc, trong đó phần tử select được liên kết với chính nó. Topics Đối tượng cung cấp văn bản tùy chọn. Ngay khi người dùng chọn một tùy chọn, AngularJS sẽ ghi đè lên. Topics Với chuỗi được chọn, cả hai tùy chọn đều biến mất. Đoạn mã được sửa bên dưới giữ danh sách trong một thuộc tính và lựa chọn trong một thuộc tính khác, và sử dụng ng-options để lập danh sách.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.js"></script>
</head>
<body>
<h1>Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
    <form>
        Topic Description:<br><br>
        Name : <input type="text" ng-model="pName"><br>
        Topic :<br>
        <!-- Topics holds the list; selectedTopic holds the choice -->
        <select ng-model="selectedTopic" ng-options="t for t in Topics"></select>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', []);
    app.controller('DemoCtrl', function($scope) {
        $scope.pName = "Guru99";

        $scope.Topics = ["Controller", "Models"];
        $scope.selectedTopic = $scope.Topics[0];
    });
</script>
</body>
</html>

Code Giải thích:

Ô nhập văn bản được liên kết với pNamevà phần tử được chọn được liên kết với selectedTopicVì phần tử chọn có thuộc tính mô hình riêng, việc chọn một tùy chọn sẽ không bao giờ làm thay đổi danh sách.
Topics Mảng chứa hai giá trị “Controller” và “Models”. ng-options Biểu thức sẽ duyệt qua mảng đó và hiển thị một tùy chọn cho mỗi mục, vì vậy việc thêm chủ đề thứ ba không yêu cầu thay đổi mã HTML.
selectedTopic Mục đầu tiên được thiết lập sẵn, đó là lý do tại sao menu thả xuống mở ra với một mục mặc định hợp lý thay vì một hàng trống.

Đầu ra:

Từ kết quả đầu ra, có thể thấy rằng giá trị được gán cho pName biến là “Guru99”, và bộ điều khiển lựa chọn cung cấp các tùy chọn “Bộ điều khiển” và “Mô hình”. Bỏ qua các ví dụ hoạt động, đôi khi các liên kết không chịu cập nhật, và lý do rất đáng để biết.

Vì sao liên kết ng-model đôi khi thất bại

Hầu hết các sự cố được báo cáo liên quan đến ng-model không phải là lỗi trong AngularJS mà là hệ quả của cách hoạt động của scope và primitive.

Trường hợp điển hình là một ràng buộc được đặt bên trong một chỉ thị tạo ra phạm vi con, chẳng hạn như: ng-lặp lại, ng-if hoặc ng-switch. Viết ng-model="name" Việc này tạo ra một bản sao bóng trên phạm vi con, vì vậy phạm vi cha không bao giờ thấy được sự chỉnh sửa. Thay vào đó, hãy liên kết với một thuộc tính của đối tượng — ng-model="user.name" — đảm bảo mọi phạm vi đều trỏ đến cùng một tham chiếu. Đây là lý do tại sao các nhà phát triển AngularJS giàu kinh nghiệm luôn nhấn mạnh việc sử dụng dấu chấm trong mọi biểu thức ng-model.

Hai nguyên nhân khác nữa chiếm phần lớn các nguyên nhân còn lại:

Thiếu bộ điều khiển hoặc mô-đun: Nếu ng-app hoặc ng-controller bị viết sai chính tả, liên kết sẽ âm thầm không hiển thị gì thay vì báo lỗi.
Giá trị đã thay đổi bên ngoài AngularJS: Một giá trị được thiết lập từ trình xử lý jQuery hoặc hàm gọi lại setTimeout nằm ngoài chu kỳ xử lý, do đó giao diện không được làm mới cho đến khi $scope.$apply() chạy.

Kiểm tra ba điều đó sẽ giải quyết được phần lớn các sự cố liên quan đến việc kết nối không hoạt động.

Câu Hỏi Thường Gặp

`ng-bind` là cơ chế một chiều: nó in giá trị của model vào một phần tử. `ng-model` là cơ chế hai chiều và chỉ hoạt động trên các điều khiển biểu mẫu, vì vậy dữ liệu người dùng nhập vào model cũng như dữ liệu được xuất ra khỏi model.

Thêm thuộc tính ng-model-options, ví dụ: ng-model-options=”{ debounce: 500 }”. AngularJS sẽ đợi nửa giây sau lần nhấn phím cuối cùng trước khi cập nhật mô hình, điều này hữu ích cho các ô tìm kiếm kích hoạt yêu cầu.

Nhìn chung là đúng. Các trợ lý AI viết lại ng-model thành [(ngModel)] và thêm phần nhập FormsModule. Các biểu mẫu phản ứng, trình phân tích cú pháp tùy chỉnh và các pipeline $formatters vẫn cần được xem xét thủ công, vì Angular mô hình hóa chúng rất khác.

Các công cụ AI nhanh chóng kiểm tra những lỗi thường gặp: một ràng buộc nguyên thủy bên trong phạm vi con, tên bộ điều khiển bị viết sai chính tả và một giá trị được gán bên ngoài chu kỳ băm. Mỗi lỗi đều gây ra một sự cố âm thầm thay vì hiển thị lỗi trên bảng điều khiển.

Chỉ có kiểu nhập liệu `type=”number` mới được phân tích thành giá trị số. Điều khiển `type=”text”` luôn trả về chuỗi, vì vậy phép so sánh với `===` sẽ thất bại. Hãy chuyển đổi rõ ràng hoặc thay đổi kiểu nhập liệu.

Cách sử dụng “ng-model” trong AngularJS với VÍ DỤ

Mô hình ng trong AngularJS là gì?

Thuộc tính ng-model

Cách sử dụng mô hình ng

1) Vùng văn bản

2) Yếu tố đầu vào

3) Chọn phần tử từ Dropdown

Vì sao liên kết ng-model đôi khi thất bại

Câu Hỏi Thường Gặp

Tóm tắt bài viết này với:

Đăng kí để nhận thư mới

Mô hình ng trong AngularJS là gì?

Thuộc tính ng-model

Cách sử dụng mô hình ng

1) Vùng văn bản

NHỮNG BÀI VIẾT LIÊN QUAN

2) Yếu tố đầu vào

3) Chọn phần tử từ Dropdown

Vì sao liên kết ng-model đôi khi thất bại

Câu Hỏi Thường Gặp

Tóm tắt bài viết này với:

Đăng kí để nhận thư mới