菜鸡学AngularJS-13 内置指令之基础ng属性指令
2016-08-29 本文已影响86人
菜鸡
一：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>
