AngularJS изрази: ARRAY, обекти, $eval, низове [Примери]

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

Какво е Angular JS Expressions?

Изразите са променливи, които са дефинирани в двойните скоби {{ }}. Те се използват много често в Angular JS и ще ги видите в предишните ни уроци.

Обяснете изразите Angular.js с пример

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

Синтаксис:

Прост пример за израз е {{5 + 6}}.

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

Нека да разгледаме пример за Angular.JS изрази.

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

Angular.js изрази

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

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

    <h1> Guru99 Global Event</h1>

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

</body>
</html>

Обяснение на кода:

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

Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.

Изход:

Angular.js изрази

От изхода,

  • Вижда се, че се извършва събирането на двете числа 9 и 6 и се показва добавената стойност 15.

Angular.JS Numbers

Изразите могат да се използват и за работа с числа. Нека да разгледаме пример за Angular.JS изрази с числа.

В този пример искаме просто да покажем просто умножение на 2 числови променливи, наречени марж и печалба, и да покажем тяхната умножена стойност.

Angular.JS Numbers

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

    <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.6.9/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>

Обяснение на кода:

  1. Директивата ng-init се използва в angular.js за дефиниране на променливи и съответните им стойности в самия изглед. Това е нещо като дефиниране на локални променливи за кодиране във всяка програмен език. В този случай ние дефинираме 2 променливи, наречени марж и печалба, и им присвояваме стойности.
  2. След това използваме 2-те локални променливи и умножаваме техните стойности.

Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.

Изход:

Angular.JS Numbers

От изхода,

  • Може ясно да се види, че се извършва умножението на 2 числа 2 и 200 и се показва умножената стойност от 400.

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

AngularJS низове

Изразите могат да се използват и за работа с низове. Нека да разгледаме пример за Angular JS изрази с низове.

В този пример ще дефинираме 2 низа от „firstName“ и „lastName“ и ще ги покажем с помощта на съответните изрази.

AngularJS низове

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

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

    <h1> Guru99 Global Event</h1>

    <div ng-app="" ng-init="firstName='Guru';lastName='99'">

        &nbsp;&nbsp;&nbsp;
        First Name : {{firstName}}<br>&nbsp;&nbsp;&nbsp;
        last Name : {{lastName}}

    </div>

</body>
</html>

Обяснение на кода:

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

Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.

Изход:

AngularJS низове

От изхода може ясно да се види, че стойностите на firstName и lastName се показват на екрана.

Angular.JS обекти

Изразите могат да се използват за работа JavaСценарий предмети също.

Нека да разгледаме пример за Angular.JS изрази с javascript обекти. Javascript обект се състои от двойка име-стойност.

По-долу е даден пример за синтаксиса на javascript обект.

Синтаксис:

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

В този пример ще дефинираме един обект като обект на човек, който ще има 2 двойки ключови стойности на „firstName“ и „lastName“.

Angular.JS обекти

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

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

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="person={firstName:'Guru',lastName:'99'}">

    &nbsp;&nbsp;&nbsp;
    First Name : {{person.firstName}}<br>&nbsp;&nbsp;&nbsp;
    Last Name : {{person.lastName}}

</div>

</body>
</html>

Обяснение на кода:

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

Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.

Изход:

Angular.JS обекти

От изхода,

  • Може ясно да се види, че стойностите на “firstName” и “secondName” се показват на екрана.

AngularJS масиви

Изразите могат да се използват и за работа с масиви. Нека да разгледаме пример за Angular JS изрази с масиви.

В този пример ще дефинираме масив, който ще съдържа оценките на ученик по 3 предмета. В изгледа ще покажем съответно стойността на тези знаци.

AngularJS масиви

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

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

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="marks=[1,15,19]">

    Student Marks<br>&nbsp;&nbsp;&nbsp;
    Subject1 : {{marks[0] }}<br>&nbsp;&nbsp;&nbsp;
    Subject2 : {{marks[1] }}<br>&nbsp;&nbsp;&nbsp;
    Subject3 : {{marks[2] }}<br>&nbsp;&nbsp;&nbsp;
</div>

</body>
</html>

Обяснение на кода:

  1. Директивата ng-init се използва за дефиниране на масива с името „marks“ с 3 стойности от 1, 15 и 19.
  2. След това използваме изрази на марки [индекс] за достъп до всеки елемент от масива.

Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.

Изход:

AngularJS масиви

От изхода може ясно да се види, че маркировките, които се показват, са дефинирани в масива.

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

Angular.JS Expression възможности

  1. Ъгловите изрази са като JavaСкрипт изрази. Следователно той има същата мощност и гъвкавост.
  2. In JavaСкрипт, когато се опитате да оцените недефинирани свойства, той генерира ReferenceError или TypeError. В Angular оценката на израза е прощаваща и генерира undefined или null.
  3. Човек може да използва филтри в рамките на изрази, за да форматира данни, преди да ги покаже.

Ограничения на Angular JS Expression

  1. Понастоящем няма наличност за използване на условни изрази, цикли или изключения в Angular израз
  2. Не можете да декларирате функции в Angular израз, дори в директивата ng-init.
  3. Човек не може да създава регулярни изрази в ъглов израз. Регулярният израз е комбинация от символи и знаци, които се използват за намиране на низове като .*\.txt$. Такива изрази не могат да се използват в Angular JS изрази.
  4. Освен това не може да се използва или да се прави празнота в ъглов израз.

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

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

Нека да разгледаме един прост пример за това.

В този пример,

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

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

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

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.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>

Обяснение на кода:

  1. Първо дефинираме 2 променливи „a“ и „b“, всяка от които има стойност 1.
  2. Използваме функцията $scope.$eval, за да оценим добавянето на 2-те променливи и да я присвоим на променливата на обхвата 'value'.
  3. След това просто показваме стойността на променливата „стойност“ в изгледа.

Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.

Изход:

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

Горният изход показва изхода на израза, който е оценен в регулатор. Резултатите по-горе показват, че изразът $eval е използван за извършване на добавяне на 2 променливи на обхват „a и b“, като резултатът е изпратен и показан в изгледа.

Oбобщение

  • Видяхме как изразите в Ъглова JS може да се използва за оценка на редовното JavaИзрази, подобни на скрипт, като просто събиране на числа.
  • Директивата ng-init може да се използва за дефиниране на променливи в ред, които могат да се използват в изгледа.
  • Изразите могат да бъдат направени да работят с примитивни типове като низове и числа.
  • Изразите могат да се използват и за работа с други типове, като напр JavaСкриптови обекти и масиви.
  • Изразите в Angular JS имат няколко ограничения, като например липсата на регулярни изрази или използването на функции, цикли или условни изрази.