AngularJS Expressions

Previous Page Introduction to AngularJS
Next Page AngularJS Modules

Ang AngularJS ay gumagamit ngAng expressionIbind ang data sa HTML.

AngularJS Expressions

Ang mga expression ng AngularJS ay pwedeng isulat sa mga pangpangalawang kandado:{{ expression }}.

Ang mga expression ng AngularJS ay pwedeng isulat din sa mga direktiba:ng-bind="expression".

Ang AngularJS ay ipapaliwanag ang expression at ibabalik ang resulta sa lugar kung saan nasulat ang expression.

AngularJS ExpressionsNgayon ang kapareho Ang mga expression ng JavaScript：Maaaring mayroon itong literal, operator at variable.

Halimbawa {{ 5 + 5 }} o {{ firstName + " " + lastName }}

ឧទាហរណ៍

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>Ang aking unang expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>

Try It Yourself

Kung inalis: ng-app Ang mga direktiba, HTML ay ipapakita nang walang pagpaliwanag ang expression:

ឧទាហរណ៍

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div>
  <p>Ang aking unang expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>

Try It Yourself

Maaari mong isulat ang expression sa iyong paboritong lugar at simple ang ipapaliwanag ng AngularJS at ibabalik ang resulta.

ឧទាហរណ៍: អោយ AngularJS ផ្លាស់ប្តូរតម្លៃ CSS អត្រារបស់ខ្លួន។

កែប្រែតម្លៃរបស់ខ្លួនដើម្បីផ្លាស់ប្តូរពណ៌នៃបរិច្ឆ័នទៅក្រោម:

ពណ៌សីហី

ឧទាហរណ៍

<div ng-app="" ng-init="myCol='lightblue'">
<input style="background-color:{{myCol}}" ng-model="myCol">
</div>

Try It Yourself

ជាមួយ:

ជាមួយ ng-bind:

ឧទាហរណ៍

<div ng-app="" ng-init="quantity=1;cost=5">
<p>ចំនួនសរុប (ដុល្លាអាមេរិក): {{ quantity * cost }}</p>
</div>

Try It Yourself

ជាមួយ ng-bind ឧទាហរណ៍ដូចនឹង:

ឧទាហរណ៍

<div ng-app="" ng-init="quantity=1;cost=5">
<p>ចំនួនសរុប (ដុល្លាអាមេរិក): <span ng-bind="quantity * cost"></span></p>
</div>

Try It Yourself

ជាមួយ:

ជាមួយ ng-bind:

ជាមួយ ng-bind គឺមិនច្បាស់លាស់នោះទេ។ អ្នកនឹងរៀនពីវិធីល្អប្រសើរជាមួយនឹងប្រព័ន្ធតម្រួតក្នុងវគ្គអត្ថប្រវត្តិ:

ឧទាហរណ៍

<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>ឈ្មោះគឺ {{ firstName + " " + lastName }}</p>
</div>

Try It Yourself

ឧទាហរណ៍ដូចនឹង ng-bind:

ឧទាហរណ៍

<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>ឈ្មោះគឺ <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>

Try It Yourself

មុខងារ AngularJS

មុខងារ AngularJS មានលក្ខណៈដូចនឹងមុខងារ JavaScript:

ឧទាហរណ៍

<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>ឈ្មោះគឺ {{ person.lastName }}</p>
</div>

Try It Yourself

ឧទាហរណ៍ដូចនឹង ng-bind:

ឧទាហរណ៍

<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>ឈ្មោះគឺ <span ng-bind="person.lastName"></span></p>
</div>

Try It Yourself

មុខងារ AngularJS

មុខងារ AngularJS ជាមួយមុខងារ JavaScript ជាមួយបន្តផ្ទាល់:

ឧទាហរណ៍

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>លទ្ធផលទីបីគឺ {{ points[2] }}</p>
</div>

Try It Yourself

ឧទាហរណ៍ដូចនឹង ng-bind:

ឧទាហរណ៍

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>Ang ikatlong resulta ay <span ng-bind="points[2]"></span></p>
</div>

Try It Yourself