※ng-hide、ng-show、ng-disabled、ng-readonly
※寫死的值
<html> <script type="text/javascript" src="angular.js"></script> <body ng-app> <p ng-hide="true">看不見</p> <p ng-hide="false">看見</p> <p ng-show="true">看見</p> <p ng-show="false">看不見</p> <p> <button ng-disabled="true">按不下去</button> <button ng-disabled="false">按的下去</button> </p> <p> <input ng-readonly="true" value="不可改" /> <input ng-readonly="false" value="可改" /> </p> </body> </html>v
※注意 readonly 屬性在HTML裡有三種方式：readonly="true"、readonly、readonly="readonly"
但用ng-readonly就只有true|false；disabled也是一樣
※初始值
<html> <script type="text/javascript" src="angular.js"></script> <body ng-app ng-init="xxx=true; ooo=10"> <p ng-hide="xxx">看不見</p> <p ng-show="xxx">看見</p> <p> <button ng-disabled="xxx">按不下去</button> </p> <p> <input ng-readonly="ooo > 1" value="不可改" /> </p> </body> </html>
※變數也可以取名為readonly，但並不表示 ng-readonly="readonly" 成立，只是剛好 readonly 是個true|false
※動態給值
<html>
<script type="text/javascript" src="angular.js"></script>
<body ng-app ng-init="xxx=true">
<p ng-hide="xxx">看不見</p>
<p ng-show="xxx">看見</p>
<input type="checkbox" ng-model="xxx">按我
<p>{{ xxx }}</p>
</body>
</html>
※
※ng-selected、ng-checked
<html> <script type="text/javascript" src="angular.js"></script> <body ng-app> <select> <option value="a">A</option> <option value="b" ng-selected="true">B</option> <option value="c">C</option> </select> <br /> <select multiple> <option value="a">A</option> <option value="b" ng-selected="true">B</option> <option value="c" ng-selected="true">C</option> </select> <br /> <input type="checkbox" name="xxx" />c1 <input type="checkbox" name="xxx" ng-checked="true" />c2 <input type="checkbox" name="xxx" ng-checked="true" />c3 <br /> <input type="radio" name="ooo" />r1 <input type="radio" name="ooo" ng-checked="true" />r2 <input type="radio" name="ooo" />r3 </body> </html>
※觀念和上面一模一樣
沒有留言:
張貼留言