AngularJs 常見內建指令
阿新 • • 發佈：2019-01-29
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS 指令</title> <!-- <link rel="stylesheet" ng-href="{{link}}"> --> <style> .red { color: red; } .blue { color: blue; } </style> </head> <!-- 指令:HTML在構建應用（App）時存在諸多不足之處，AngularJS通過擴充套件一系列的HTML屬性 或標籤來彌補這些缺陷，所謂指令就是AngularJS自定義的HTML屬性或標籤， 這些指令都是以ng-做為字首的，例如ng-app、ng-controller、ng-repeat等。 常見內建指令: ng-app 指定應用根元素，至少有一個元素指定了此屬性。 ng-controller 指定控制器 ng-show 控制元素是否顯示，true顯示、false不顯示 ng-hide 控制元素是否隱藏，true隱藏、false不隱藏 ng-if 控制元素是否“存在”，true存在、false不存在 ng-src 增強圖片路徑 ng-href 增強地址 ng-class 控制類名 ng-include 引入模板 ng-disabled 表單禁用 ng-readonly 表單只讀 ng-checked 單/複選框表單選中 ng-selected 下拉框表單選中 ng-init 初始化資料 --> <body ng-app="App"> <ul ng-controller="DemoController"> <li ng-bind="name"></li> <li>{{name}}</li> <li ng-show="1">ng-show用來顯示或隱藏內容的，當值為true時顯示</li> <li ng-hide="0">ng-hide用來顯示或隱藏內容的，當值為true時隱藏</li> <li ng-if="1">ng-if用來控制元素是否存在，當值為true時存在{{name}}</li> <li><img ng-src="{{path}}" alt=""></li> <li ng-class="{red: true, blue: true}">ng-class指令</li> <li><input type="text" ng-disabled="0"></li> <li><input type="text" ng-readonly="1" value="angular"></li> <li><input type="checkbox" ng-checked="1">男</li> <li> <select name="" id=""> <option value="">河北省</option> <option value="">山東省</option> <option value="" ng-selected="1">北京市</option> </select> </li> </ul> <script src="./libs/angular.min.js"></script> <script> // 建立模組 var App = angular.module('App', []); App.controller('DemoController', ['$scope', function ($scope) { // $scope $scope.name = '張飛'; $scope.path = './images/author.jpg'; $scope.link = './main.css'; }]); </script> </body> </html>