AngularJS 内置指令
1. ng-disabled
- <input>(text, checkbox, radio, number, url, email, submit);
- <textarea>;
- <select>;
- <button>;
例子：
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
</head>
<body>
<h1>Demo 1:</h1>
<input type="text" ng-model="someProperty" placeholder="Type to Enable">
<button ng-model="button" ng-disabled="!someProperty">A Button</button>
<h1>Demo 2:</h1>
<textarea ng-disabled="isDisabled">Wait 1 second</textarea>
<script>
// JS for demo 2:
angular.module('myApp', [])
.run(function($rootScope, $timeout) {
$rootScope.isDisabled = true;
$timeout(function() {
$rootScope.isDisabled = false;
}, 1000);
});
</script>
</body>
</html>
all:
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
</head>
<body>
<h1>Demo 1:</h1>
<input type="text" ng-model="someProperty" placeholder="Type to Enable">
<button ng-model="button" ng-disabled="!someProperty">A Button</button>
<input type="text" ng-model="someProperty"><br />
<input type="text"
ng-readonly="someProperty"
value="Some text here" />
<label>someProperty = {{someProperty}}</label>
<input type="checkbox"
ng-checked="someProperty"
ng-init="someProperty = true"
ng-model="someProperty">
<label>someProperty = {{anotherProperty}}</label>
<input type="checkbox"
ng-checked="anotherProperty"
ng-init="anotherProperty = false"
ng-model="anotherProperty">
<h1>Demo 2:</h1>
<textarea ng-disabled="isDisabled">Wait 1 second</textarea>
<label>Select Two Fish:</label>
<input type="checkbox"
ng-model="isTwoFish"><br />
<select>
<option>One Fish</option>
<option ng-selected="isTwoFish">Two Fish</option>
</select>
<script>
angular.module('myApp', [])
</script>
<script>
// JS for demo 2:
angular.module('myApp', [])
.run(function ($rootScope, $timeout) {
$rootScope.isDisabled = true;
$timeout(function () {
$rootScope.isDisabled = false;
}, 1000);
});
</script>
</body>
</html>
ng-href 与插值
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
</head>
<body>
<!-- Always use ng-href when href includes an {{ expression }} -->
<a ng-href="{{myHref}}">I'm feeling lucky, when I load</a>
<!-- href may not load before user clicks -->
<a href="{{myHref}}">I'm feeling 404</a>
<script>
angular.module('myApp', [])
.run(function ($rootScope, $timeout) {
$timeout(function () {
$rootScope.myHref = 'http://google.com';
}, 2000);
})
</script>
</body>
</html>
ng-src与图片加载：
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
</head>
<body>
<h1>Wrong Way</h1>
<img src="{{imgSrc}}" />
<h1>Right way</h1>
<img ng-src="{{imgSrc}}" />
<script>
angular.module('myApp', [])
.run(function ($rootScope, $timeout) {
$timeout(function () {
$rootScope.imgSrc = 'https://www.google.com/images/srpr/logo11w.png';
}, 2000);
});
</script>
</body>
</html>
ng-app:
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
</head>
<body>
<div ng-controller="SomeCtrl">
{{ someProperty }}
<button ng-click="someAction()">Communicate</button>
</div>
<script>
angular.module('myApp', [])
.controller('SomeCtrl', function($scope) {
$scope.someProperty = 'hello computer';
$scope.someAction = function() {
$scope.someProperty = 'hello human';
};
});
</script>
</body>
</html>
ng-contraoller:
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
</head>
<body>
<div ng-controller="SomeCtrl">
{{ someModel.someProperty }}
<button ng-click="someAction()">Communicate</button>
</div>
<script>
angular.module('myApp', [])
.controller('SomeCtrl', function($scope) {
// create a model
$scope.someModel = {
// with a property
someProperty: 'hello computer'
}
// set methods on the $scope itself
$scope.someAction = function() {
$scope.someModel.someProperty = 'hello human';
};
});
</script>
</body>
</html>
