Как да използвате „ng-model“ в AngularJS с ПРИМЕРИ

по: Джеймс Хартман Джеймс Хартман
Hours Обновено

⚡ Умно обобщение

ng-моделът в AngularJS свързва входен контрол директно със свойство на $scope, keeping изгледът и моделът са синхронизирани в двете посоки. Разделите по-долу обхващат атрибута, три работещи примера и грешките, които начинаещите допускат най-често.

  • 🔗 Двупосочно подвързване: ng-model изпраща потребителски вход в свойството $scope и автоматично изпраща промените от контролера обратно в контролата.
  • 📝 Обвързване на текстово поле: Свържете многоредов низ с текстово поле и използвайте escape sequence \n, за да принудите прекъсванията на редовете в рендираната стойност.
  • ☑️ Състояние на квадратчето за отметка: Отметка, свързана с ng-model, съхранява булева стойност, така че true прави квадратчето отметнато, а false го оставя празно.
  • 📋 Падащи списъци: Попълване на избран елемент с ng-options и свързване на избрания елемент с отделно свойство на модела.
  • ⚠️ Често срещана повреда: Обвързването на селекция със същия обект, който предоставя текста на опцията, презаписва този обект при първата селекция.
  • 🛠️ Валидационни куки: ng-model добавя класове ng-pristine, ng-dirty, ng-valid и ng-invalid, които управляват условен стил и проверки на формата.
Прочетете повече

Какво е ng-модел в AngularJS?

ng-model е директива в AngularJS, която представлява модела, а основната ѝ цел е да обвърже „изгледа“ с „модела“. Всичко, което потребителят въведе в контрола, се записва директно в свойство на $scopeи каквото и да запише контролерът в това свойство, се връща директно обратно в контрола.

Например, да предположим, че искате да представите на крайния потребител проста страница, като показаната по-долу, която изисква от потребителя да въведе „Собствено име“ и „Фамилия“ в текстовите полета. След това искате да се уверите, че съхранявате информацията, която потребителят е въвел, във вашия модел на данни.

Можете да използвате директивата ng-model, за да съпоставите текстовите полета „Име“ и „Фамилия“ с вашия модел на данни. Директивата ще гарантира, че данните в „изгледа“ и тези на вашия „модел“ ще се синхронизират през цялото време, без нито един ред код за обработка на събития.

⚠️ Бележка към версията: AngularJS (клон 1.x) достигна края на жизнения си цикъл на 31 декември 2021 г. и вече не получава корекции за сигурност. Примерите по-долу все още работят, но в съвременния Angular същото двупосочно обвързване е записано като [(ngModel)] и изисква FormsModule.

Атрибутът ng-model

Както беше обсъдено в горния раздел, атрибутът ng-model се използва за обвързване на данните във вашия модел с изгледа, представен на потребителя.

Атрибутът ng-model се използва за,

  1. Свързване на контроли като въвеждане, текстово поле и елементи за избор в изгледа с модела.
  2. Предоставяне на поведение за валидиране — например, валидиране може да се добави към текстово поле, така че да могат да се въвеждат само цифрови символи.
  3. Поддържане на състоянието на контролата. Под състояние имаме предвид, че контролата и данните винаги са синхронизирани: ако стойността на данните се промени, стойността в контролата се променя автоматично и обратно.
  4. Излагане на това състояние като CSS класове. AngularJS добавя ng-pristine, ng-dirty, ng-valid намлява ng-invalid към всеки контрол, носещ ng-модел, което прави условното стилизиране на формуляри лесно.

След като разберете атрибута, следващата стъпка е да го приложите към трите типа контроли, които ще срещате най-често.

Как да използвате ng-model

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 Обяснение:

  1. - директива ng-model прикачва променливата член, наречена „pDescript„ion“ към контролата „textarea“. „p“DescriptПроменливата „ion“ съдържа текста, който се предава към контролата за текстово поле. rows="4" намлява cols="50" Атрибутите просто оразмеряват контрола, така че многоредовият текст да се показва правилно.
  2. Членската променлива „p“Descript„ion“ е зададена многоредова стойност. \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 Обяснение:

  1. Директивата ng-model прикачва променливата член „pname“ към контролата за въвеждане на текст и свойствата Topic.Controller намлява Topic.Models към двата контрола за отметка.
  2. В контролера, на „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 Обяснение:

  1. Въвеждането на текст е обвързано с pNameи елементът select е обвързан с selectedTopicТъй като select има собствено свойство на модела, избирането на опция никога не нарушава самия списък.
  2. - Topics масивът съдържа двете стойности „Контролер“ и „Модели“. ng-options Изразът обхожда този масив и рендира по една опция за всеки запис, така че добавянето на трета тема не изисква промяна в маркировката.
  3. 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 изчаква половин секунда след последното натискане на клавиш, преди да актуализира модела, което е полезно за полета за търсене, които задействат заявка.

До голяма степен, да. AI асистентите пренаписват ng-model като [(ngModel)] и добавят импорта на FormsModule. Реактивните форми, персонализираните парсери и $formatters пайплайните все още се нуждаят от ръчен преглед, защото Angular ги моделира много различно.

Инструментите с изкуствен интелект бързо проверяват обичайните заподозрени: примитивна граница в дъщерен обхват, неправилно изписано име на контролер и стойност, присвоена извън цикъла на дайджест. Всяко от тях води до тиха грешка, а не до конзолна грешка.

Само вход тип „число“ се анализира до числова стойност. Контрол тип „текст“ винаги връща низ, така че сравненията с === се провалят. Конвертирайте изрично или превключете входния тип.

Обобщете тази публикация с: