標籤：style ng-repeat ons span margin tar func dex efault
index.html:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> .colorStyle { color: #3e8f3e; } </style></head><body><div ng-app="myApp"> <div ng-controller="firstController"> <p>{{1+1}}</p> <p ng-bind="1+1">2</p> <p ng-bind-template="{{1+1}}"></p> <ul ng-init="cityArr = [‘上海‘,‘北京‘,‘廣州‘,‘深圳‘]" ng-class="{colorStyle:status}"><!--初始化指令--> <li ng-repeat="city in cityArr"> <span>當前元素:{{$index}}{{city}}</span> <span>是否為頭元素:{{$first}}</span> <span>是否為非頭非尾元素:{{$middle}}</span> <span>是否為尾元素:{{$last}}</span> </li> </ul> <!--載入另一個頁面的指令--> <div ng-include="‘other.html‘"> </div> <div ng-include src="‘other.html‘"> </div> <button ng-click="changeStatus($event)">切換狀態</button> <p>{{status}}</p> <!--內建節點指令--> <div ng-style="{‘color‘:‘red‘,‘margin-top‘:‘20px‘}"> 你好 </div> <div ng-style="defaultStyle"> 你好嗎 </div> <!--監聽status屬性的值--> <ul ng-switch on="status"> <li ng-switch-when="true"> true </li> <li ng-switch-when="false"> false </li> </ul> <img src="{{src}}"/> <img ng-src="{{src}}"/> </div></div><script type="text/javascript" src="../../vendor/angular/angularJs.js"></script><script type="text/javascript" src="app/index.js"></script><script></script></body></html>
other.html:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HI</title></head><body> 另一個頁面</body></html>
index.js:
var myApp = angular.module(‘myApp‘, []).controller(‘firstController‘,function ($scope) { $scope.status = false; $scope.changeStatus = function (event) { console.log(event.target); $scope.status = !$scope.status; //angular.element把angular元素轉換為jquery元素 angular.element(event.target).html(‘切換狀態‘+$scope.status); } $scope.defaultStyle = { color:‘red‘, ‘margin-top‘:‘50px‘ } $scope.src = "http://www.angularjs.org/img/AngularJS-large.png";})
運行結果：
angularJS1筆記-(8)-內建指令
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
