AngularJS 표현식: ARRAY, Objects, $eval, Strings [예]

Angular JS 표현식이란 무엇입니까?

표현식은 이중 중괄호 {{ }}로 정의된 변수입니다. Angular JS에서 매우 일반적으로 사용되며 이전 튜토리얼에서 볼 수 있습니다.

예를 들어 Angular.js 표현식 설명

AngularJS 표현식은 {{expression}}이라는 이중 중괄호 안에 작성된 표현식입니다.

구문 :

표현식의 간단한 예는 {{5 + 6}}입니다.

Angular.JS 표현식은 ng-bind 지시문과 동일한 방식으로 데이터를 HTML에 바인딩하는 데 사용됩니다. AngularJS는 표현식이 있는 위치에 정확하게 데이터를 표시합니다.

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>

코드 설명 :

위 스크린샷에 표시된 것처럼 예제의 ng-app 지시문은 비어 있습니다. 이는 컨트롤러를 할당할 모듈이 없다는 의미일 뿐입니다. ��ħ, 코드에 첨부된 서비스.
우리는 두 개의 숫자를 더하는 간단한 표현식을 추가하고 있습니다.

코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.

출력:

출력에서,

두 숫자 9와 6을 더하면 15의 합이 나타나는 것을 볼 수 있습니다.

Angular.JS Numbers

표현식은 숫자와 함께 작업하는 데에도 사용할 수 있습니다. 숫자가 포함된 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="margin=2;profit=200">
        Total profit margin

        {{margin*profit}}
    </div>

</body>
</html>

코드 설명 :

ng-init 지시문은 각도.js에서 뷰 자체에서 변수와 해당 값을 정의하는 데 사용됩니다. 이는 모든 코드에 로컬 변수를 정의하는 것과 다소 비슷합니다. 프로그래밍 언어. 이 경우에는 마진과 이익이라는 두 가지 변수를 정의하고 해당 변수에 값을 할당합니다.
그런 다음 2개의 지역 변수를 사용하고 해당 값을 곱합니다.

코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.

출력:

출력에서,

2개의 숫자 2와 200의 곱이 이루어지는 것을 명확히 볼 수 있으며, 곱해진 값인 400이 표시되어 있습니다.

AngularJS 문자열

표현식은 문자열 작업에도 사용될 수 있습니다. 문자열이 포함된 Angular JS 표현식의 예를 살펴보겠습니다.

이 예에서는 "firstName"과 "lastName"이라는 두 개의 문자열을 정의하고 그에 따라 표현식을 사용하여 표시해 보겠습니다.

<!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>

코드 설명 :

ng-init 지시어는 firstName 변수를 "Guru" 값으로 정의하고 lastName 변수를 "99" 값으로 정의하는 데 사용됩니다.
그런 다음 {{firstName}} 및 {{lastName}}의 표현식을 사용하여 이러한 변수의 값에 액세스하고 그에 따라 뷰에 표시합니다.

코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.

출력:

출력을 통해 firstName과 lastName의 값이 화면에 표시되는 것을 명확하게 볼 수 있습니다.

Angular.JS 객체

표현식을 사용하여 작업할 수 있습니다. JavaScript 개체도.

javascript 객체를 사용한 Angular.JS 표현식의 예를 살펴보겠습니다. 자바스크립트 객체는 이름-값 쌍으로 구성됩니다.

다음은 자바스크립트 객체 구문의 예입니다.

구문 :

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

이 예에서는 "firstName"과 "lastName"이라는 2개의 키 값 쌍을 갖는 사람 개체로 하나의 개체를 정의하겠습니다.

<!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>

코드 설명 :

ng-init 지시어는 값이 "Guru"인 firstName과 값이 "99"인 변수 lastName의 키 값 쌍을 갖는 person 개체를 정의하는 데 사용됩니다.
그런 다음 {{person.firstName}} 및 {{person.secondName}}의 표현식을 사용하여 이러한 변수의 값에 액세스하고 그에 따라 뷰에 표시합니다. 실제 멤버 변수는 person 객체의 일부이므로 실제 값에 액세스하려면 점(.) 표기법을 사용하여 액세스해야 합니다.

코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.

출력:

출력에서,

“firstName”과 “secondName”의 값이 화면에 표시되는 것을 명확히 볼 수 있습니다.

AngularJS 배열

표현식은 배열 작업에도 사용될 수 있습니다. 배열을 사용한 Angular JS 표현식의 예를 살펴보겠습니다.

이 예에서는 3개 과목에 대한 학생의 성적을 담을 배열을 정의하겠습니다. 뷰에서는 이에 따라 이러한 마크의 값을 표시합니다.

<!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>

코드 설명 :

ng-init 지시어는 3, 1, 15의 19개 값이 있는 "marks"라는 이름의 배열을 정의하는 데 사용됩니다.
그런 다음 배열의 각 요소에 액세스하기 위해 마크 [색인] 표현식을 사용합니다.

코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.

출력:

출력 결과를 보면 배열에 정의된 마크가 표시되는 것을 명확하게 볼 수 있습니다.

AngularJS 표현식 기능 및 제한 사항

Angular.JS 표현식 기능

각도 표현은 다음과 같습니다. Java스크립트 표현. 따라서 동일한 힘과 유연성을 갖습니다.
In Java스크립트에서 정의되지 않은 속성을 평가하려고 하면 ReferenceError 또는 TypeError가 생성됩니다. Angular에서 표현식 평가는 관대하며 정의되지 않음 또는 null을 생성합니다.
표현식 내에서 필터를 사용하여 데이터를 표시하기 전에 형식을 지정할 수 있습니다.

Angular JS 표현식 제한 사항

현재 Angular 표현식에서는 조건부, 루프 또는 예외를 사용할 수 없습니다.
ng-init 지시문 내부에서도 Angular 표현식으로 함수를 선언할 수 없습니다.
Angular 표현식에서는 정규 표현식을 만들 수 없습니다. 정규식은 .*\.txt$와 같은 문자열을 찾는 데 사용되는 기호와 문자의 조합입니다. 이러한 표현식은 Angular JS 표현식 내에서 사용할 수 없습니다.
또한 Angular 표현식에서는 사용하거나 무효화할 수 없습니다.

표현식과 $eval의 차이점

$eval 함수를 사용하면 컨트롤러 자체 내에서 표현식을 평가할 수 있습니다. 따라서 표현식은 뷰에서 평가에 사용되는 반면 $eval은 컨트롤러 함수에서 사용됩니다.

이에 대한 간단한 예를 살펴보겠습니다.

이 예에서,

$eval 함수를 사용하여 숫자 2개를 더하고 이를 범위 객체에서 사용할 수 있게 하여 뷰에 표시되도록 할 것입니다.

<!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>

코드 설명 :

먼저 각각 2의 값을 갖는 두 개의 변수 'a'와 'b'를 정의합니다.
$scope.$eval 함수를 사용하여 두 변수의 추가를 평가하고 이를 범위 변수 'value'에 할당합니다.
그런 다음 뷰에 변수 'value'의 값을 표시합니다.

코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.

출력:

위 출력은 다음에서 평가된 표현식의 출력을 보여줍니다. 제어 장치위 결과는 $eval 표현식이 2개의 범위 변수 'a와 b'를 더하는 데 사용되었고 그 결과가 뷰에 전송되어 표시되었음을 보여줍니다.

제품 개요

우리는 의 표현이 어떻게 되는지 살펴보았습니다. 각도 JS 정기적으로 평가하는 데 사용할 수 있습니다. Java숫자를 간단히 더하는 것과 같은 대본과 같은 표현.
ng-init 지시문을 사용하여 뷰에서 사용할 수 있는 변수를 인라인으로 정의할 수 있습니다.
표현식은 문자열이나 숫자와 같은 기본 유형에도 적용 가능합니다.
표현식을 사용하여 다음과 같은 다른 유형과 작업할 수도 있습니다. Java스크립트 객체와 배열.
Angular JS의 표현식에는 정규 표현식이 없거나 함수, 루프 또는 조건문을 사용하지 않는 등 몇 가지 제한 사항이 있습니다.

AngularJS 표현식: ARRAY, Objects, $eval, Strings [예]

Angular JS 표현식이란 무엇입니까?

예를 들어 Angular.js 표현식 설명

Angular.JS Numbers

AngularJS 문자열

Angular.JS 객체

AngularJS 배열

AngularJS 표현식 기능 및 제한 사항

표현식과 $eval의 차이점

제품 개요

이 게시물을 요약하면 다음과 같습니다.

뉴스레터 신청하기

Angular JS 표현식이란 무엇입니까?

예를 들어 Angular.js 표현식 설명

Angular.JS Numbers

관련 기사

AngularJS 문자열

Angular.JS 객체

AngularJS 배열

AngularJS 표현식 기능 및 제한 사항

표현식과 $eval의 차이점

제품 개요

이 게시물을 요약하면 다음과 같습니다.

뉴스레터 신청하기