Bài 12 Sử dụng ng-show và ng-hide trong AngularJS như thế nào?
Lượt xem: 6972
Xem demo
Ví dụ sau sẽ giúp bạn biết cách sử dụng ng-show và ng-hide trong AngularJS như thế nào.
<html>
<head>
<title>Chỉ dẫn (Directive) ng-show và ng-hide trong AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
angular.module('MyForm', [])
.controller('myController', ['$scope', function($scope) {
}]);
</script>
</head>
<body ng-app="MyForm">
<h3>Chỉ dẫn (Directive) ng-show và ng-hide trong AngularJS</h3> <br />
<h5>Click để hiển thị/ẩn </h5>
<input type="checkbox" ng-model="o_checkbox"> Check hiển thị <br />
<div>
<div ng-show="o_checkbox">
Tôi ở đây
</div>
</div>
<input type="checkbox" ng-model="o_checkboxhide"> Check để ẩn <br />
<div>
<div ng-hide="o_checkboxhide">
Tôi đã sẵn sàng
</div>
</div>
</body>
</html>
Xem thêm:Bài 13 Sử dụng ng-repeat trong Angularjs như thế nào?
Xem demo