angularjs入門-ng-disabled,ng-checked,ng-selected
今天打算想把其餘的directive一次講完，因為很多使用方法大同小異，其實更好的方式就是直接參考官網，參考directive的部份，我會針對ng-options還有事件相關或ng-submit和驗証的另外發文說明，其實ng-disabled看名稱就知道，我們可以針對textbox或button直接反灰不能操作，如下圖所示
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body ng-app="App">
<div ng-controller="FirstCtrl as ctrl">
<input type="button" value="切換" ng-click="ctrl.toggle()" />
<input type="text" ng-disabled="ctrl.isDisabled" />
<input type="button" value="送出" ng-disabled="ctrl.isDisabled" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function ($scope) {
var vm = this;
vm.toggle = function () {
vm.isDisabled = !vm.isDisabled;
};
});
</script>
</body>
</html>
按下切換按鈕可以動態切換是否要禁止用戶操作，ng-checked則是針對checkbox或radio是否核選，下面用checkbox來做示範，也是提供一顆按鈕來交換核選
<div ng-controller="FirstCtrl as ctrl">
<input type="checkbox" ng-checked="ctrl.isChecked" value="寫硬體" />
<input type="checkbox" ng-checked="!ctrl.isChecked" value="寫軟體" />
<input type="button" value="交換" ng-click="ctrl.changeChecked()" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function () {
var vm = this;
vm.changeChecked = function () {
vm.isChecked = !vm.isChecked;
};
});
</script>
</body>
接著則是ng-selected是針對select，如果成立的話就會停在那個選項，如下範例
<div ng-controller="FirstCtrl as ctrl">
<select>
<option>硬體</option>
<option ng-selected="isSelected">軟體</option>
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function () {
var vm = this;
});
</script>
</body>如果我們要選擇軟體的話，只要把script改成如下，預設就會選擇軟體
angular.module('App', [])
.controller('FirstCtrl', function () {
var vm = this;
vm.isSelected = true;
});
</script>
說明一下，vm-isSelected=false就不會選擇，null也不會選擇，true或有任意值就會選擇，各位可以再自行試看看，以上再請多多指教
