Что такое ng-модель в AngularJs?
ng-модель — это директива в Angular.JS, которая представляет модели, и ее основная цель — привязать «представление» к «модели».
Например, предположим, что вы хотите представить конечному пользователю простую страницу, подобную той, которая показана ниже, в которой пользователю предлагается ввести «Имя» и «Фамилия» в текстовые поля. И затем вы захотели сохранить информацию, введенную пользователем в вашу модель данных.
Вы можете использовать директиву ng-model для сопоставления полей текстового поля «Имя» и «Фамилия» с вашей моделью данных.
Директива ng-model гарантирует, что данные в «представлении» и в вашей «модели» будут синхронизированы все время.
В этом уроке вы узнаете
Атрибут ng-модели
Как обсуждалось во введении к этой главе, атрибут 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>
Объяснение кода:
- Директива нг-модель используется для прикрепления переменной — члена под названием «pDescription» под контроль «TEXTAREA».
Переменная «pDescription» будет фактически содержать текст, который будет передан в элемент управления текстовой области. Мы также упомянули 2 атрибута для элемента управления textarea: row = 4 и cols = 50. Эти атрибуты были упомянуты, чтобы мы могли отображать несколько строк текста. Определяя эти атрибуты, текстовая область теперь будет иметь 4 строки и 50 столбцов, чтобы можно было отображать несколько строк текста.
- Здесь мы присоединяем переменную-член к объекту области с именем «pDescription» и помещаем строковое значение в переменную.
- Обратите внимание, что мы помещаем литерал / n в строку, чтобы текст мог состоять из нескольких строк, когда он отображается в текстовой области. Литерал / n разбивает текст на несколько строк, чтобы он мог отображаться в элементе управления textarea как несколько строк текста.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий вывод.
Вывод:
Из вывода
- Хорошо видно, что значение, присвоенное переменной pDescription как часть объекта области, было передано элементу управления textarea.
- Впоследствии он был отображен при загрузке страницы.
2) Элементы ввода
Директива ng-model также может применяться к элементам ввода, таким как текстовое поле, флажки, переключатели и т. Д.
Давайте рассмотрим пример того, как мы можем использовать модель 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"><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>
Объяснение кода:
- Директива нг-модель используется для прикрепления переменной — члена под названием «PNAME» в текстовый элемент управления типа входа. Переменная «pname» будет содержать текст «Guru99», который будет передан в элемент управления вводом текста. Обратите внимание, что любое имя может быть присвоено имени переменной-члена.
- Здесь мы определяем наш первый флажок «Контроллеры», который прикреплен к переменной-члену Topics.Controllers. Флажок будет отмечен для этого элемента управления проверкой.
- Здесь мы определяем наш первый флажок «Модели», который прикреплен к переменной-члену Topics.Models. Флажок не будет отмечен для этого элемента управления проверкой.
- Здесь мы присоединяем переменную-член с именем «pName» и помещаем строковое значение «Guru99».
- Мы объявляем переменную-член массива с именем «Topics» и присваиваем ей два значения: первое — «true», а второе — «false».
Поэтому, когда первый флажок получает значение true, флажок будет помечен для этого элемента управления, а также, поскольку второе значение равно false, флажок не будет помечен для этого элемента управления.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий вывод.
Вывод:
Из вывода
- Хорошо видно, что значение, присвоенное переменной pName, равно «Guru99».
- Поскольку первое проверочное значение «true», оно прошло, флажок помечен для флажка «Контроллеры». Аналогично, поскольку второе значение равно false, флажок не помечен для флажка «Модели».
3) Выберите элемент формы Dropdown
Директива 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>
- Директива нг-модель используется для прикрепления переменного — члена под названием «Тема» для выбора типа управления. Внутри элемента управления select для каждого из параметров мы прикрепляем переменную-член Topics.option1 для первого параметра и Topics.option2 для второго.
- Здесь мы определяем нашу переменную массива Topics, которая содержит 2 пары ключ-значение. Первая пара имеет значение «Контроллеры», а вторая — «Модели». Эти значения будут переданы для выбора входного тега в представлении.
Если код выполнен успешно, будет показан следующий вывод.
Вывод:
Из выходных данных видно, что значение, присвоенное переменной pName, равно «Guru99», и мы можем видеть, что в элементе управления «Выбор входа» есть опции «Контроллеры» и «Модели».
Резюме
- Модели в Angular JS представлены директивой ng-model. Основная цель этой директивы — привязать представление к модели. Как создать простой контроллер, используя директивы ng-app, ng-controller и ng-model.
- Директива ng-model может быть связана с элементом управления вводом «текстовая область», а многострочные строки могут передаваться из контроллера в представление.
- Директива ng-model может быть связана с элементами управления вводом, такими как элементы управления text и checkbox, чтобы сделать их более динамичными во время выполнения.
- Директива ng-model также может использоваться для заполнения списка выбора опциями, которые могут быть отображены пользователю.