一、AngularJS表達(dá)式核心概念

AngularJS表達(dá)式是數(shù)據(jù)綁定的核心機(jī)制，用于在HTML模板中動(dòng)態(tài)輸出數(shù)據(jù)。與傳統(tǒng)JavaScript表達(dá)式不同，Angular表達(dá)式直接在作用域($scope)上下文中執(zhí)行，提供簡(jiǎn)潔的數(shù)據(jù)渲染能力。

表達(dá)式特性：

• 自動(dòng)同步：當(dāng)數(shù)據(jù)模型變更時(shí)視圖自動(dòng)更新
• 容錯(cuò)機(jī)制：{{ undefinedVar }}不會(huì)引發(fā)頁面崩潰
• 過濾器支持：通過管道符(|)實(shí)現(xiàn)數(shù)據(jù)格式化
• 指令集成：與ng-bind等指令無縫協(xié)作

二、AngularJS表達(dá)式實(shí)例代碼

1. 基礎(chǔ)數(shù)據(jù)綁定

<div ng-app="myApp" ng-controller="myCtrl">
  <p>歡迎用戶: {{ userName }}</p>
  <p>訂單金額: {{ orderAmount | currency }}</p>
</div>

<script>
angular.module('myApp', [])
  .controller('myCtrl', function($scope) {
    $scope.userName = "李經(jīng)理";
    $scope.orderAmount = 1580.5;
  });
</script>

2. 對(duì)象與數(shù)組操作

<ul>
  <li ng-repeat="item in productList">
    {{ item.name }} - 庫存: {{ item.stock }}
  </li>
</ul>

<script>
$scope.productList = [
  { name: "云對(duì)象存儲(chǔ)OSS", stock: 87 }
];
</script>

3. 邏輯表達(dá)式

<div ng-class="{ 'text-danger': remainingTime < 24 }">
  服務(wù)到期: {{ expirationDate | date:'yyyy-MM-dd' }}
</div>