一：ng-href 超鏈接屬性
1：<a ng-href="{{myHref}}">等待兩秒后插值生效</a>
2：<a href="{{myHref}}">點擊兩秒后生效</a>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./angular.min.js"></script>
<script src="./Test.js"></script>
</head>
<body>
<div ng-app = "myapp">
<div ng-controller="TestCall">
<h1>{{text}}</h1>
<a ng-href="{{myHref}}">等待兩秒后插值生效</a>
<a href="{{myHref}}">點擊兩秒后生效</a>
</div>
</div>
</body>
<script>
var app = angular.module('myapp', []);
app.controller("TestCall", function($scope,$timeout){
$scope.text = "http://www.baidu.com"
$timeout(function(){
$scope.myHref = $scope.text;
},2000);
});
</script>
</html>
二：ng-src 圖片鏈接屬性
1：<img src="{{mysrc}}" alt="">
2：<img ng-src="{{mysrc}}" alt=""> 表達式生效之前不加載圖像
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./angular.min.js"></script>
<script src="./Test.js"></script>
</head>
<body>
<div ng-app = "myapp">
<div ng-controller="TestCall">
<h1>{{text}}</h1>
<img src="{{mysrc}}" alt="">
<img ng-src="{{mysrc}}" alt="">
</div>
</div>
</body>
<script>
var app = angular.module('myapp', []);
app.controller("TestCall", function($scope,$timeout){
$scope.text = 'https://www.baidu.com/img/bd_logo1.png' ;
$timeout(function(){
$scope.mysrc = $scope.text;
},2000);
});
</script>
</html>
三：ng-disabled 控制輸入框狀態啟用或禁用
可綁定屬性到下列表單輸入字段
<input> <textatea> <select> <button>
<body>
<div ng-app = "myapp">
<input type="text" ng-model="TestDisabled" />
<button ng-disabled="!TestDisabled">按鈕</button>
</div>
</body>
四：ng-checked 勾選屬性
多選框案例，都綁定ng-model值
<body>
<div ng-app = "myapp">
<input type="checkbox" ng-model="allchecked">全選按鈕
<br>
<br>
<input type="checkbox" ng-checked="allchecked">項目一<br>
<input type="checkbox" ng-checked="allchecked">項目二<br>
<input type="checkbox" ng-checked="allchecked">項目三<br>
</div>
</body>
五：ng-readonly 文本輸入 禁用/未禁用
可綁定屬性到下列元素
<input> <textarea>
ng-readoniy 屬性被綁定到了ng-model上 如果checkbox是true 下面的也同步
<body>
<div ng-app = "myapp">
<input type="checkbox" ng-model="some"><br>
<input type="text" ng-readonly="some" />
</div>
</body>
六：ng-select 下拉框
設置 <select> 列表中的 <option> 元素的 selected 屬性。
<body>
<div ng-app = "myapp">
<input type="checkbox" ng-model="some"><br>
<select>
<option>Fish1</option>
<option ng-selected="some">Fish2</option>
</select>
</body>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
