Како се користи 'нг-модел' у АнгуларЈС са ПРИМЕРИМА

Преглед садржаја:

Anonim

Шта је нг-модел у АнгуларЈс?

нг-модел је директива у Ангулар.ЈС која представља моделе и чија је примарна сврха да веже „поглед“ на „модел“.

На пример, претпоставимо да сте желели да крајњем кориснику представите једноставну страницу, попут оне приказане доле, која од корисника тражи да у текстуалне оквире унесе „Име“ и „Презиме“. А онда сте желели да обезбедите да информације које је корисник унео у ваш модел података сачувате.

Директиву нг-модел можете користити за мапирање поља текстуалног оквира „Име“ и „Презиме“ у ваш модел података.

Директива нг-модел ће осигурати да се подаци у „приказу“ и подацима вашег „модела“ држе у синхронизацији све време.

У овом упутству ћете научити-

  • Атрибут нг-модел
  • Како се користи нг-модел
    • Тект Ареа
    • Улазни елементи
    • Изаберите падајући образац елемента

Атрибут нг-модела

Као што је објашњено у уводу у ово поглавље, атрибут нг-модел користи се за повезивање података у вашем моделу са приказом представљеним кориснику.

Атрибут нг-модел се користи за,

  1. Контроле везивања као што су унос, подручје текста и одабире у приказу у модел.
  2. Обезбедите понашање провере - на пример, потврда се може додати у оквир за текст тако да се у поље за текст могу унети само нумерички знакови.
  3. Атрибут нг-модел одржава стање контроле (Под стањем подразумевамо да се контрола и подаци морају увек синхронизовати. Ако се вредност наших података промени, аутоматски ће променити вредност у контроли и и обрнуто)

Како се користи нг-модел

1) Подручје текста

Ознака подручја за текст користи се за дефинисање контроле вишеструког уноса текста. Текстуално подручје може садржати неограничен број знакова, а текст се приказује фонтом фиксне ширине.

Дакле, погледајмо сада једноставан пример како можемо додати директиву нг-модел у контролу текстуалне области.

У овом примеру желимо да покажемо како можемо да проследимо вишередни низ из контролера у приказ и додамо ту вредност контроли текстуалне области.

Event Registration


Guru99 Global Event


   Topic Description:

   

Објашњење кода:

  1. Директива нг-модел се користи за причвршћивање променљиву члан под називом "пДесцриптион" контроли "тектареа".

    Променљива „пДесцриптион“ ће заправо садржати текст који ће бити прослеђен контроли за област текста. Такође смо поменули 2 атрибута за контролу текстуалног подручја, а то су редови = 4 и колоне = 50. Ови атрибути су поменути тако да можемо приказати више редова текста. Дефинисањем ових атрибута текстуално подручје ће сада имати 4 реда и 50 колона тако да може приказати више редова текста.

  2. Овде причвршћујемо променљиву члана на опсег који се зове „пДесцриптион“ и променљивој стављамо вредност низа.
  3. Имајте на уму да стављамо / н литерал у низ тако да текст може бити у више редова када је приказан у подручју текста. / Н литерал дели текст на више редова тако да се у контроли текстуалног подручја може приказати као више редова текста.

Ако се код успешно изврши, следећи излаз ће се приказати када покренете код у прегледачу.

Излаз:

Из резултата

  • Јасно се може видети да је вредност додељена променљивој пДесцриптион као део објекта опсега прослеђена контроли тектареа.
  • После тога је приказан када се страница учита.

2) Улазни елементи

Директива нг-модел може се применити и на елементе уноса као што су оквир за текст, поља за потврду, радио дугмад итд.

Погледајмо пример како можемо да користимо нг-модел са типом уноса „тектбок“ и „цхецкбок“.

Овде ћемо имати тип уноса текста који ће имати назив „Гуру99“ и постојаће 2 поља за потврду, један који ће бити подразумевано означен, а други неће бити означен.

Event Registration


Guru99 Global Event


   Topic Description:

   Name : 
   Topic :
   Controller
   Models

Објашњење кода:

  1. Директива нг модела се користи за причвршћивање променљиву чланова под називом "пнаме" на контролу текста инпут типе. Променљива „пнаме“ ће садржати текст „Гуру99“ који ће бити прослеђен контроли за унос текста. Имајте на уму да се било којем имену може дати име променљиве члана.
  2. Овде дефинишемо наше прво поље за потврду „Контролери“ које је приложено променљивој члана Топицс.Цонтроллерс. Потврдни оквир ће бити означен за ову контролу провере.
  3. Овде дефинишемо наше прво поље за потврду „Модели“ које је приложено променљивој члана Топицс.Моделс. Поље за потврду неће бити означено за ову контролу провере.
  4. Овде прилажемо променљиву члана звану „пНаме“ и стављамо вредност низа „Гуру99“.
  5. Декларишемо променљиву низа чланова звану „Теме“ и дајемо јој две вредности, прва је „тачно“, а друга „нетачно“.

    Дакле, када први потврдни оквир добије вредност труе, потврдни оквир ће бити означен за ову контролу, а слично томе, пошто је друга вредност нетачна, потврдни оквир неће бити означен за ову контролу.

Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.

Излаз:

Из резултата,

  • Јасно се може видети да је вредност додељена променљивој пНаме „Гуру99“
  • С обзиром да је прва вредност провере „труе“, прошла је, поље за потврду је означено за поље „Цонтроллерс“. Слично томе, пошто је друга вредност нетачна, поље за потврду није означено за поље „Модели“.

3) Изаберите падајући облик из елемента

Директива нг-модел се такође може применити на елемент за одабир и користити за попуњавање ставки листе на листи за одабир.

Погледајмо пример како можемо користити нг-модел са одабраним типом уноса.

Овде ћемо имати тип за унос текста који ће имати име „Гуру99“ и биће изабрана листа са 2 ставке листе „Цонтроллер“ и „Моделс“.

Event Registration


Guru99 Global Event


   Topic Description:

   Name : 
   Topic :
   
  1. Директива нг модела се користи за причвршћивање променљиву чланова, под називом "Теме" у изаберите контроле типа. Унутар контроле одабира, за сваку од опција, прилажемо променљиву члана Топицс.оптион1 за прву опцију и Топицс.оптион2 за другу опцију.
  2. Овде дефинишемо нашу променљиву низа Топицс која садржи 2 пара кључ / вредност. Први пар има вредност „Контролери“, а други вредност „Модели“. Ове вредности ће се проследити за одабир улазне ознаке у приказу.

    Ако се код успешно изврши, приказаће се следећи излаз.

Излаз:

Из излаза се види да је вредност додељена променљивој пНаме „Гуру99“ и можемо видети да изабрана контрола улаза има опције „Контролери“ и „Модели“.

Резиме

  • Модели у Ангулар ЈС представљени су директивом нг-модел. Примарна сврха ове директиве је да веже поглед за модел. Како направити једноставни контролер помоћу директива нг-апп, нг-цонтроллер и нг-модел.
  • Директива нг-модела може се повезати са контролом уноса „текстуалног подручја“ и вишередни низови могу се пренети из контролера у приказ.
  • Директива нг-модел може се повезати са контролама уноса попут текста и контрола поља за потврду како би биле динамичније у току извођења.
  • Директива нг-модел се такође може користити за попуњавање листе одабира опцијама које могу бити приказане кориснику.