2014年7月25日 星期五

AngularJS:ng-show、hide


Show:

Hello Im Wille


Show:<input type='checkbox' ng-model='checked'>

<h1 ng-show='checked'>Hello Im Wille</h1>  
另外也可以更改勾選框內容,如顯示是、否等選項,以下勾選為蘋果反之則為橘子。

Show:

Hello Im Wille

蘋果、橘子:

{{output}}

完整程式碼:http://jsbin.com/zejuti/1/edit

<!DOCTYPE html>
<html ng-app>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
Show:<input type='checkbox' ng-model='checked'>
<h1 ng-show='checked'>Hello Im Wille</h1>  
蘋果、橘子:<input type='checkbox' ng-model='output' ng-true-value="蘋果" ng-false-value="橘子">
<h2 ng-show='output'>{{output}}</h2>    
</body>
</html>

沒有留言:

張貼留言