Як використовувати «ng-model» в AngularJS з ПРИКЛАДАМИ

⚡ Розумний підсумок

ng-модель в AngularJS безпосередньо прив'язує елемент керування введенням до властивості в $scope, keeping вигляд і модель синхронізовані в обох напрямках. У розділах нижче розглядається атрибут, три робочі приклади та помилки, з якими найчастіше стикаються новачки.

🔗 Двостороннє скріплення: ng-model передає введені користувачем дані у властивість $scope та автоматично передає зміни контролера назад у елемент керування.
???? Прив'язка текстового поля: Прив’яжіть багаторядковий рядок до текстового поля та використовуйте escape-послідовність \n, щоб примусово вставити розриви рядків у відображеному значенні.
☑️ Стан прапорця: Прапорець, пов'язаний з ng-model, зберігає логічне значення, тому значення true відображає прапорець як позначений, а false залишає його порожнім.
📋 Випадні списки: Заповнити елемент select параметрами ng-options та прив'язати вибраний елемент до окремої властивості моделі.
⚠️ Поширена помилка: Прив'язка виділення до того самого об'єкта, який надає текст його опції, перезаписує цей об'єкт при першому виділенні.
🛠️ Перевірочні гачки: ng-model додає класи ng-pristine, ng-dirty, ng-valid і ng-invalid, які керують умовним стилем і перевіркою форми.

Детальніше

Що таке ng-model в AngularJS?

ng-model — це директива в AngularJS, яка представляє модель, і її основне призначення — прив’язати «представлення» до «моделі». Все, що користувач вводить в елемент керування, записується безпосередньо у властивість на $scope, і все, що контролер записує в цю властивість, одразу ж передається назад в елемент керування.

Наприклад, припустимо, що ви хочете представити кінцевому користувачеві просту сторінку, як показано нижче, де користувачеві пропонується ввести «Ім’я» та «Прізвище» в текстові поля. А потім ви хочете переконатися, що інформація, введена користувачем, зберігається у вашій моделі даних.

Ви можете використовувати директиву ng-model для зіставлення текстових полів «Ім’я» та «Прізвище» з вашою моделлю даних. Директива забезпечить синхронізацію даних у «представленні» та вашій «моделі» протягом усього часу, без жодного рядка коду обробки подій.

⚠️ Примітка до версії: AngularJS (гілка 1.x) досягла кінця свого життєвого циклу 31 грудня 2021 року та більше не отримує патчів безпеки. Наведені нижче приклади все ще працюють, але в сучасному Angular те саме двостороннє зв'язування записується як [(ngModel)] і вимагає FormsModule.

Атрибут ng-model

Як обговорювалося у розділі вище, атрибут ng-model використовується для прив'язки даних у вашій моделі до представлення, що відображається користувачеві.

Атрибут ng-model використовується для,

Прив'язка елементів керування, таких як введення, текстова область та елементи вибору у поданні, до моделі.
Забезпечення поведінки перевірки — наприклад, перевірку можна додати до текстового поля, щоб можна було вводити лише числові символи.
Підтримка стану елемента керування. Під станом ми маємо на увазі, що елемент керування та дані завжди синхронізовані: якщо значення даних змінюється, значення в елементі керування змінюється автоматично, і навпаки.
Відображення цього стану як CSS-класів. AngularJS додає ng-pristine, ng-dirty, ng-valid та ng-invalid до кожного елемента керування, що містить ng-модель, що спрощує умовне стилізування форм.

Зрозумівши атрибут, наступним кроком є його застосування до трьох типів керування, які ви зустрічатимете найчастіше.

Як використовувати ng-модель

1) Текстова область

Тег текстової області використовується для визначення багаторядкового елемента керування введенням тексту. Область тексту може містити необмежену кількість символів, а текст відображається шрифтом фіксованої ширини.

Отже, тепер давайте розглянемо простий приклад того, як ми можемо додати директиву ng-model до елемента керування текстовою областю. У цьому прикладі ми хочемо показати, як ми можемо передати багаторядковий рядок з контролера до представлення та приєднати це значення до елемента керування текстовою областю.

<!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 Пояснення:

Команда директива ng-model приєднує змінну-член під назвою “pDescript«іон» до елемента керування «текстова область». «p»DescriptЗмінна «ion» містить текст, який передається до елемента керування текстовою областю. rows="4" та cols="50" Атрибути просто змінюють розмір елемента керування таким чином, щоб багаторядковий текст відображався правильно.
Змінна-член «p»Descript«іон» присвоюється багаторядкове значення. \n Ескейп-послідовність всередині рядка змушує текст переміщуватися на другий рядок, коли текстове поле його відтворює.

вихід:

З виводу видно, що багаторядковий текст, призначений у контролері, відображається в елементі керування текстовою областю, розділений на два рядки саме там, де \n сидить.

2) Елементи введення

Директива ng-model також працює зі звичайними елементами введення. Нижче ми одночасно прив'язуємо текстове поле та два прапорці, щоб ви могли побачити, як ng-model обробляє рядкове значення та логічне значення пліч-о-пліч.

<!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 Пояснення:

Директива ng-model приєднує змінну-член «pname» до елемента керування введенням тексту, а властивості Topic.Controller та Topic.Models до двох елементів керування прапорцями.
У контролері, "pname" отримує рядок "Guru99”, а об’єкту “Topic” надається два логічні члени. Прапорець, пов’язаний з ng-model, завжди зчитує та записує логічне значення, тому true відображає прапорець як позначений та false залишає це чітким.

вихід:

З виходу,

Чітко видно, що значення, присвоєне pname змінна – це «Guru99 ".
Оскільки перше обмежене значення є true, прапорець позначено для прапорця «Контролер». Аналогічно, оскільки друге значення false, прапорець «Моделі» не позначено.

3) Виберіть елемент зі спадного меню

Директиву ng-model також можна застосувати до елемента select, щоб елемент, який вибирає користувач, зберігався в моделі.

Тут у нас буде поле для введення тексту з назвою «Guru99” та список вибору з двома елементами списку: “Контролер” та “Моделі”.

⚠️ Виправлення: На скріншоті вище показано оригінальний лістинг, який прив'язав елемент select до того самого Topics об'єкт, який надав текст опції. Щойно користувач вибирає опцію, AngularJS перезаписує Topics з вибраним рядком, і обидва параметри зникають. Виправлений список нижче зберігає список в одній властивості, а вибір - в іншій, і використовує ng-options щоб скласти список.

<!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 Пояснення:

Введення тексту пов'язане з pName, а елемент select прив'язаний до selectedTopicОскільки вибір має власну властивість моделі, вибір опції ніколи не порушує сам список.
Команда Topics Масив містить два значення «Контролер» та «Моделі». ng-options вираз обходить цей масив і відображає один параметр для кожного запису, тому додавання третьої теми не вимагає змін у розмітці.
selectedTopic попередньо встановлено на перший запис, що призводить до відкриття випадаючого списку з розумним значенням за замовчуванням замість порожнього рядка.

вихід:

З виводу видно, що значення, призначене pName змінна – це «Guru99”, а елемент керування select пропонує опції «Контролер» та «Моделі». Якщо не враховувати робочі приклади, прив’язки іноді відмовляються оновлюватися, і варто знати причини цього.

Чому прив'язки ng-model іноді не працюють

Більшість повідомлених проблем з ng-моделлю не є помилками в AngularJS, а наслідками того, як працюють області видимості та примітиви.

Класичний випадок — це зв'язування, розміщене всередині директиви, яка створює дочірню область видимості, наприклад, ng-повтор, ng-if або ng-switch. Написання ng-model="name" створюється тіньова копія в дочірній області видимості, тому батьківський об'єкт ніколи не бачить редагування. Замість цього прив'язка до властивості об'єкта — ng-model="user.name" — усі області видимості вказують на одне й те саме посилання. Саме тому досвідчені розробники AngularJS наполягають на крапці в кожному виразі ng-моделі.

Дві додаткові причини пояснюють більшу частину решти:

Відсутній контролер або модуль: Якщо ng-app або ng-controller написано з помилкою, зв'язування мовчки нічого не відтворює, а не викликає помилку.
Значення змінено поза межами AngularJS: значення, встановлене з обробника jQuery або зворотного виклику setTimeout, потрапляє поза циклом дайджесту, тому представлення не оновлюється до $scope.$apply() працює.

Перевірка цих трьох речей вирішує переважну більшість прив'язок, які, здається, не працюють.

Поширені запитання

ng-bind є одностороннім: він друкує значення моделі в елемент. ng-model є двостороннім і працює лише з елементами керування форми, тому введені користувачем дані повертаються як у модель, так і виходять з неї.

Додайте ng-model-options, наприклад, ng-model-options=”{ debounce: 500 }”. Потім AngularJS чекає півсекунди після останнього натискання клавіші, перш ніж оновлювати модель, що корисно для пошукових полів, які запускають запит.

Здебільшого, так. Помічники ШІ переписують ng-model як [(ngModel)] та додають імпорт FormsModule. Реактивні форми, користувацькі парсери та конвеєри $formatters все ще потребують ручної перевірки, оскільки Angular моделює їх дуже по-різному.

Інструменти штучного інтелекту швидко перевіряють звичні підозрювані: примітивне обмеження всередині дочірньої області видимості, неправильно написане ім'я контролера та значення, призначене поза циклом дайджесту. Кожне з них призводить до тихої помилки, а не до консольної помилки.

Тільки вхідні дані типу "число" перетворюються на числове значення. Елемент керування типу "текст" завжди повертає рядок, тому порівняння з === не вдається. Перетворіть явно або перемкніть тип вхідних даних.

Як використовувати «ng-model» в AngularJS з ПРИКЛАДАМИ

Що таке ng-model в AngularJS?

Атрибут ng-model

Як використовувати ng-модель

1) Текстова область

2) Елементи введення

3) Виберіть елемент зі спадного меню

Чому прив'язки ng-model іноді не працюють

Поширені запитання

Підсумуйте цей пост за допомогою:

Підпишіться на розсилку

Що таке ng-model в AngularJS?

Атрибут ng-model

Як використовувати ng-модель

1) Текстова область

СТАТТІ ПО ТЕМІ

2) Елементи введення

3) Виберіть елемент зі спадного меню

Чому прив'язки ng-model іноді не працюють

Поширені запитання

Підсумуйте цей пост за допомогою:

Підпишіться на розсилку