標籤：rect 數組 應用 under asc .com angular ack pre
AngularJS 運算式 （1.{{}} 2.ng-bind(單項綁定)）AngularJS 運算式寫在雙大括弧內： {{ expression }}AngularJS 使用運算式把資料繫結到 HTML，這與 ng-bind 指令有異曲同工之妙。
AngularJS 將在運算式書寫的位置"輸出"資料。
AngularJS 運算式 很像 JavaScript 運算式：它們可以包含文字、運算子和變數。
運算式{{}} 案例
ng-init 初始化資料一般會用ng-controller代替
<body>
<div ng-app="" ng-init="quantity=1;cost=5">
<p>總價: {{ quantity * cost }}</p>
</div>
</body>
運算式ng-bind 案例
<div ng-app="" ng-init="quantity=1;cost=5">
<p>總價: <span ng-bind="quantity * cost"></span></p>
</div>
AngularJS 指令是擴充的 HTML 屬性，帶有首碼 ng-。
ng-app 指令初始化一個 AngularJS 應用程式。
ng-init 指令初始化應用程式資料。
ng-model 指令把元素值（比如輸入欄位的值）綁定到應用程式。
ng-model雙向繫結案例（改變input裡面的資料下面{{}}裡面的資料也會改變）
<div ng-app="" ng-init="firstName=‘John‘">
<p>在輸入框中嘗試輸入:</p>
<p>姓名: <input type="text" ng-model="firstName"></p>
<p>你輸入的為: {{ firstName }}</p>
</div>
ng-repeat 指令用在一個對象數組上：迴圈數組
<div data-ng-app="" data-ng-init="names=[‘Jani‘,‘Hege‘,‘Kai‘]">
<p>使用 ng-repeat 來迴圈數組</p>
<ul>
<li data-ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
<div data-ng-app="" ng-init="names=[{id:1,name:‘狗‘},{id:1,name:‘貓‘}]">
<p>使用 ng-repeat 來迴圈數組</p>
<ul>
<li data-ng-repeat="x in names">
{{ x.id }}
</li>
</ul>
</div>
?建立自訂的指令
使用 .directive 函數來添加自訂的指令。
要調用自訂指令，HTML 元素上需要添加自訂指令名。
使用駝峰法來命名一個指令， runoobDirective, 但在使用它時需要以 - 分割, runoob-directive:
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "ACEM"
template : "<h1>自訂指令!</h1>"
};
});
</script>
</body>
angular js 綜合筆記案例
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
