Як використовувати «ng-model» в AngularJS з ПРИКЛАДАМИ
Джеймс Гартман
Що таке ng-model в AngularJs?
ng-model — це директива в Angular.JS, яка представляє моделі, і її основна мета — прив’язати «вид» до «моделі».
Наприклад, припустімо, що ви хочете представити кінцевому користувачеві просту сторінку, як показано нижче, яка просить користувача ввести «Ім’я» та «Прізвище» в текстові поля. А потім ви хотіли переконатися, що ви зберігаєте інформацію, яку користувач ввів у вашу модель даних.
Ви можете використовувати директиву ng-model, щоб зіставити поля текстового поля «Ім’я» та «Прізвище» з вашою моделлю даних.
Директива ng-model забезпечить постійну синхронізацію даних у «поданні» та вашій «моделі».
Атрибут ng-model
Як обговорювалося у вступі до цієї глави, атрибут ng-model використовується для прив’язки даних у вашій моделі до представлення, представленого користувачеві.
Атрибут ng-model використовується для,
- Прив’язка до моделі елементів керування, таких як введення, текстова область і елементи вибору в поданні.
- Надайте поведінку перевірки – наприклад, перевірку можна додати до текстового поля, що в текстове поле можна вводити лише цифрові символи.
- Атрибут ng-model підтримує стан елемента керування (Під станом ми маємо на увазі, що елемент керування та дані мають бути завжди синхронізовані. Якщо значення наших даних змінюється, це автоматично змінює значення в елементі керування та навпаки)
Як використовувати ng-модель
1) Текстова область
Тег текстової області використовується для визначення багаторядкового елемента керування введенням тексту. Область тексту може містити необмежену кількість символів, а текст відображається шрифтом фіксованої ширини.
Тепер давайте розглянемо простий приклад того, як ми можемо додати директиву ng-model до елемента керування текстовою областю.
У цьому прикладі ми хочемо показати, як ми можемо передати багаторядковий рядок від контролера до представлення та приєднати це значення до елемента керування текстовою областю.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<form>
Topic Description:<br> <br>
<textarea rows="4" cols="50" ng-model="pDescription"></textarea><br><br>
</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>
Пояснення коду:
- Команда директива ng-model використовується для приєднання змінної-члена під назвою “pDescription» до елемента керування «textarea».Description” фактично міститиме текст, який буде передано до елемента керування текстовою областю. Ми також згадали 2 атрибути для елемента керування textarea: rows=4 і cols=50. Ці атрибути були згадані, щоб ми могли показати кілька рядків тексту. Після визначення цих атрибутів текстове поле тепер матиме 4 рядки та 50 стовпців, щоб у ньому можна було відображати кілька рядків тексту.
- Тут ми приєднуємо змінну-член до об’єкта області під назвою “pDescription» і додавання рядкового значення до змінної.
- Зауважте, що ми розміщуємо літерал /n у рядку, щоб текст міг складатися з кількох рядків, коли він відображається в текстовій області. Літерал /n розбиває текст на кілька рядків, щоб він міг відображатися в елементі керування textarea як кілька рядків тексту.
Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.
вихід:
З виходу,
- Можна чітко бачити, що значення, присвоєне сторDescriptзмінну ion як частину об’єкта області було передано в елемент керування textarea.
- Згодом він відображався під час завантаження сторінки.
2) Елементи введення
Директиву ng-model також можна застосувати до елементів введення, таких як текстове поле, прапорці, перемикачі тощо.
Давайте розглянемо приклад того, як ми можемо використовувати ng-модель із типом введення «textbox» і «checkbox».
Тут у нас буде тип введення тексту, який матиме назву «Guru99» і буде 2 прапорці, один буде позначено за замовчуванням, а інший не буде позначено.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="https://code.angularjs.org/1.6.9/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>
Пояснення коду:
- Команда директива ng-model використовується для приєднання змінної-члена під назвою “pname” до текстового елемента керування типом введення. Змінна “pname” міститиме текст “Guru99”, який буде передано до елемента керування введенням тексту. Зауважте, що ім’ю змінної-члена можна присвоїти будь-яке ім’я.
- Тут ми визначаємо наш перший прапорець «Контролери», який приєднується до змінної-члена Topics.Controllers. Для цього елемента керування буде позначено прапорець.
- Тут ми визначаємо наш перший прапорець «Моделі», який приєднується до змінної-члена Topics.Models. Прапорець не буде позначено для цього елемента керування.
- Тут ми приєднуємо змінну-член під назвою «pName» і додаємо рядкове значення «Guru99».
- Ми оголошуємо змінну-член масиву під назвою «Теми» та надаємо їй два значення, перше — «true», а друге — «false». Отже, коли перший прапорець отримує значення true, прапорець буде позначено для цей елемент керування, і так само, оскільки друге значення false, прапорець не буде позначено для цього елемента керування.
Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.
вихід:
З виходу,
- Чітко видно, що змінній pName присвоєно значення «Guru99».
- Оскільки перше перевірочне значення має значення «true», то прапорець позначено для поля «Контролери». Так само, оскільки друге значення false, прапорець не позначено для прапорця «Моделі».
3) Виберіть елемент зі спадного меню
Директиву ng-model також можна застосувати до елемента select і використовувати для заповнення елементів списку в списку вибору.
Давайте розглянемо приклад того, як ми можемо використовувати ng-модель із вибраним типом введення.
Тут у нас буде тип введення тексту, який матиме назву «Guru99» і буде список вибору з 2 елементами списку «Контролер» і «Моделі».
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="https://code.angularjs.org/1.6.9/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" value="Guru99"><br>
Topic : <br>
<select ng-model="Topics">
<option>{{Topics.option1}}</option>
<option>{{Topics.option2}}</option>
</select>
</form>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoCtrl', function($scope){
$scope.pName="Guru99";
$scope.Topics =
{
option1 : "Controller",
option2 : "Module"
}; });
</script>
</body>
</html>
- Команда директива ng-model використовується для приєднання змінної-члена під назвою «Теми» до елемента керування вибраного типу. Всередині елемента керування вибором для кожного з параметрів ми додаємо змінну-член Topics.option1 для першого параметра та Topics.option2 для другого параметра.
- Тут ми визначаємо нашу змінну масиву Topics, яка містить 2 пари ключ-значення. Перша пара має значення «Контролери», а друга — «Моделі». Ці значення буде передано для вибору вхідного тегу в поданні. Якщо код виконано успішно, буде показано такий результат.
вихід:
З виведених даних видно, що змінній pName присвоєно значення «Guru99», і ми бачимо, що елемент керування вибраним введенням має параметри «Контролери» та «Моделі».
Підсумки
- Моделі в Angular JS представлені директивою ng-model. Основна мета цієї директиви — прив’язати представлення до моделі. Як створити простий контролер за допомогою директив ng-app, ng-controller і ng-model.
- Директиву ng-model можна зв’язати з елементом керування введенням «текстова область», а багаторядкові рядки можна передавати від контролера до представлення.
- Директиву ng-model можна пов’язати з елементами керування введенням, такими як елементи керування текстом і прапорцями, щоб зробити їх більш динамічними під час виконання.
- Директиву ng-model також можна використовувати для заповнення списку вибору параметрами, які можна відобразити користувачеві.
