AngularJS изрази: масив, обекти, $eval, низове

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

AngularJS изразите са фрагменти от код, поставени в двойни скоби, които свързват данни директно в шаблон. Те оценяват числа, низове, обекти и масиви, а функцията $eval извършва същата оценка от вътрешността на контролер.

🧩 Синтаксис на обвързване: Double Скобите рендират стойност там, където се намира изразът, давайки същия резултат като директивата ng-bind.
🔢 Поддържани типове: Numbers, струни, JavaОбектите на скрипта, достъпвани с точкова нотация, и масивите, достъпвани чрез индекс, се оценяват правилно.
???? ️ Вградени променливи: Директивата ng-init декларира променливи на ниво изглед, които изразите могат да четат без контролер.
️ Прощаваща оценка: Недефинираните свойства връщат undefined, вместо да хвърлят чист ReferenceError JavaСкриптът би повишил.
🚫 Твърди ограничения: Цикли, изключения, декларации на функции, регулярни изрази и операторите със запетая и void не са налични.
️ Оценка на контролера: $scope.$eval оценява низ от израз в код на контролер и показва резултата на изгледа.
⚠️ Състояние на поддръжката: AngularJS достигна края на жизнения си цикъл на 31 декември 2021 г. и не получава допълнителни корекции за сигурност.

Прочетете повече

Какво представляват изразите в AngularJS?

Изразите са променливи, записани в двойни скоби {{ }}Те се използват много често в AngularJS и се появяват в по-ранните уроци от тази поредица.

⚠️ Известие за поддръжка: Достигнахме AngularJS край на жизнения цикъл на 31 декември 2021 г. и не получава допълнителни корекции или корекции за сигурност. Синтаксисът по-долу остава точен за поддържане на съществуващи AngularJS 1.x приложения; новите проекти трябва да използват модерни ъглов, където интерполационните скоби все още съществуват, но ng-init намлява $eval не го прави.

Обяснете AngularJS изразите с пример

Изразите в AngularJS се пишат в двойни скоби, както е показано в {{expression}}.

Синтаксис: един прост пример за израз е {{5 + 6}}.

Изразите в AngularJS свързват данни с HTML по същия начин, както директивата ng-bind, и AngularJS показва данните точно там, където е поставен изразът.

В този пример показваме просто събиране на числа като израз.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

    <h1>Guru99 Global Event</h1>

    <div ng-app="">
        Addition : {{6+9}}
    </div>

</body>
</html>

Code Обяснение:

Директивата ng-app е празна, което означава, че никой модул не предоставя контролери, директивиили услуги на тази страница.
Един прост израз събира две числа.

Изход:

Извършва се събирането на 9 и 6 и се показва резултатът, 15.

AngularJS Numbers

Изразите работят с числа. Този пример умножава две числови променливи, margin намлява profitи показва продукта.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

    <h1>Guru99 Global Event</h1>

    <div ng-app="" ng-init="margin=2;profit=200">
        Total profit margin

        {{margin*profit}}
    </div>

</body>
</html>

Code Обяснение:

Директивата ng-init дефинира променливите и техните стойности в самия изглед, подобно на локалните променливи във всеки програмен език, тук margin намлява profit са декларирани и присвоени.
След това изразът умножава тези две локални променливи.

Изход:

Извършва се умножение на 2 и 200 и се показва произведението, 400.

AngularJS низове

Изразите работят и с низове. Този пример дефинира firstName намлява lastName и показва и двете.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

    <h1>Guru99 Global Event</h1>

    <div ng-app="" ng-init="firstName='Guru';lastName='99'">
        First Name : {{firstName}}<br>
        Last Name : {{lastName}}
    </div>

</body>
</html>

Code Обяснение:

Директивата ng-init дефинира firstName със стойността „Guru" и lastName със стойност „99“.
Изразите {{firstName}} намлява {{lastName}} прочетете тези променливи и ги покажете в изгледа.

Изход:

И двете стойности се показват на екрана.

AngularJS обекти

Изразите работят с JavaСценарий обекти, които се състоят от двойки име-стойност. Синтаксисът на JavaОбектът на скрипта изглежда така:

var car = {type: "Ford", model: "Explorer", color: "White"};

Този пример дефинира a person обект, съдържащ две двойки ключ-стойност, firstName намлява lastName.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

<h1>Guru99 Global Event</h1>

<div ng-app="" ng-init="person={firstName:'Guru',lastName:'99'}">
    First Name : {{person.firstName}}<br>
    Last Name : {{person.lastName}}
</div>

</body>
</html>

Code Обяснение:

Директивата ng-init дефинира обекта person с двойките ключ-стойност firstName зададено на „Guru" и lastName зададено на „99“.
Изразите {{person.firstName}} намлява {{person.lastName}} прочетете тези членове. Тъй като те принадлежат на обекта, е необходима точкова нотация, за да се достигнат техните стойности.

Изход:

Стойностите на firstName намлява lastName се появяват на екрана.

AngularJS масиви

Изразите работят с масиви. Този пример дефинира масив, съдържащ оценките на ученика по три предмета и показва всяка стойност.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

<h1>Guru99 Global Event</h1>

<div ng-app="" ng-init="marks=[1,15,19]">
    Student Marks<br>
    Subject1 : {{marks[0]}}<br>
    Subject2 : {{marks[1]}}<br>
    Subject3 : {{marks[2]}}
</div>

</body>
</html>

Code Обяснение:

Директивата ng-init дефинира масива marks с трите стойности 1, 15 и 19.
Изрази на формата marks[index] прочетете всеки елемент.

Изход:

Показват се маркировките, дефинирани в масива.

Възможности и ограничения на AngularJS Expression

Възможности

Изразите на AngularJS приличат JavaСкриптови изрази и споделят голяма част от същата мощ и гъвкавост.
Къде JavaСкриптът повдига ReferenceError или TypeError при неопределено свойство, оценката на AngularJS е толерантна и връща undefined или null.
Филтри могат да се прилагат вътре в израз, за да се форматират данните, преди да бъдат показани.
Тернарният оператор се поддържа, така че {{ isReady ? 'Yes' : 'No' }} е валиден.

Ограничения

Циклите и обработката на изключения не могат да се използват в израз на AngularJS. Условната логика е ограничена до тернарния оператор; if изявленията не са налични.
Функциите не могат да бъдат декларирани в израз, дори не и в директивата ng-init.
Регулярни изрази не могат да се създават вътре в израз. Регулярният израз е комбинация от символи и знаци, използвани за съпоставяне на низове, като например .*\.txt$и такива литерали се отхвърлят.
Операторът със запетая (,) И void операторът не е разрешен.

ng-bind срещу Expression Braces: Кой да използвате

Double Скобите и директивата ng-bind произвеждат един и същ рендиран изход, така че изборът между тях изглежда произволен. Не е. Двете се държат различно в момента, преди AngularJS да е завършил зареждането, и тази разлика е видима за човека, използващ страницата.

Аспект	{{ expression }}	ng-bind
Написано в	Съдържание на елемента	Атрибут на елемент
Преди зареждането на AngularJS	Сурови брекети мигат на екрана	Нищо не е показано
Четливост	По-висока — стойността е вградена	По-ниска — стойността е скрита в атрибут
Няколко стойности на елемент	Да	Не, само едно подвързване
Еднократно обвързване	Да, с `{{::value}}`	Да, с `ng-bind="::value"`

Краткотрайната поява на сурови скоби е известна като проблясък на неинтерполирано съдържание и се случва, защото браузърът рендира маркировката, преди AngularJS да я компилира. Използвайте ng-bind или добавете директивата ng-cloak за съдържание, видимо над гънката. Скобите остават по-ясният и по-четлив избор навсякъде другаде, особено когато в един елемент се появяват няколко стойности.

Разлика между израз и $eval

- $eval Функцията оценява изрази от вътрешността на контролера. Изразите се оценяват в изгледа, докато $eval оценява в кода на контролера.

Този пример използва $eval да се съберат две числа и резултатът да се постави върху обекта scope, така че изгледът да може да го покаже.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

<div ng-app="sampleApp" ng-controller="AngularController">
    <h1>Guru99 Global Event</h1>
    {{value}}
</div>

<script>
    var sampleApp = angular.module('sampleApp', []);
    sampleApp.controller('AngularController', function($scope) {
        $scope.a = 1;
        $scope.b = 1;

        $scope.value = $scope.$eval('a+b');
    });
</script>

</body>
</html>

Code Обяснение:

Две променливи на обхвата, a намлява b, всеки от които притежава стойност 1.
$scope.$eval оценява тяхното събиране и присвоява резултата на променливата в обхвата value.
След това се показва изгледът value.

Изход:

Резултатът показва израза, оценен вътре в регулатор, като сумата от двете променливи на обхвата се изпраща и показва в изгледа.

Въпроси и Отговори

Поставяне на две двоеточия пред израз, както е в {{::name}}, спира наблюдението му, след като стойността бъде разрешена. Това премахва наблюдателя и намалява разходите за дайджест на страници с много статични обвързвания.

$eval оценява низ незабавно спрямо обхват. $parse връща функция за многократна употреба за многократна оценка. $interpolate обработва цял шаблонен низ, съдържащ скоби, а не единичен израз.

Най-вече. AI Инструментите запазват скобите и пренаписват филтрите като канали, но променливите ng-init нямат еквивалент в Angular и трябва да бъдат преместени ръчно в клас на компонент.

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

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

AngularJS изрази: масив, обекти, $eval, низове

Какво представляват изразите в AngularJS?

Обяснете AngularJS изразите с пример

AngularJS Numbers

AngularJS низове

AngularJS обекти

AngularJS масиви

Възможности и ограничения на AngularJS Expression

ng-bind срещу Expression Braces: Кой да използвате

Разлика между израз и $eval

Въпроси и Отговори

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

Регистрирайте се за бюлетина

Какво представляват изразите в AngularJS?

Обяснете AngularJS изразите с пример

AngularJS Numbers

AngularJS низове

СВЪРЗАНИ СТАТИИ

AngularJS обекти

AngularJS масиви

Възможности и ограничения на AngularJS Expression

ng-bind срещу Expression Braces: Кой да използвате

Разлика между израз и $eval

Въпроси и Отговори

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

Регистрирайте се за бюлетина