angularjs入門-ng-swtich
這個其實就是可以依狀態而顯示區塊，故名思義就像我們普通程式一樣的switch的用法，下面給個示意的例子，我只是模擬一個新刪顯示的區塊，只顯示文字而依switch去顯示各種狀態
<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">
<script>
</script>
</head>
<body ng-app="App">
<div ng-controller="FirstCtrl">
<input type="button" ng-click="add()" value="新增" />
<input type="button" ng-click="edit()" value="修改" />
<hr />
<div ng-switch="viewState">
<div ng-switch-when="add">
add
</div>
<div ng-switch-when="edit">
edit
</div>
<div ng-switch-default>
list
</div>
</div>
</div>
<script src="Scripts/angular.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function ($scope) {
$scope.add = function () {
$scope.viewState = 'add';
}
$scope.edit = function () {
$scope.viewState = 'edit';
}
});
</script>
</body>
</html>
接著我們就來假設一下真正的新增修改和顯示的效果，用ng-switch的方式來實作，在此我們還是只有操作陣列的方式來實現，但這邊需要注意一下有關scope繼承的問題，其實在ng-switch-when的時候，每切換一個就會產生一個新的scope來繼承父scope，這樣子的話我們就不能在各個ng-switch-when取到共同的scope的值，然後在ng-switch的外面也取不到裡面的值，那這個要怎麼處理呢??我們可以用$parent的方式，如下語法
<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">
<input type="button" ng-click="add()" value="新增" />
<input type="button" ng-click="save()" value="儲存" />
<input type="button" ng-click="cancel()" value="取消" />
<hr />
<div ng-switch="viewState">
<div ng-switch-when="add">
<input type="text" ng-model="$parent.Add.name" />
<input type="text" ng-model="$parent.Add.animal" />
</div>
<div ng-switch-when="edit">
<input type="text" ng-model="$parent.Edit.name" />
<input type="text" ng-model="$parent.Edit.animal" />
</div>
<div ng-switch-default>
<ul ng-repeat="item in people">
<li><input type="button" ng-click="select(item)" value="修改" /> name:{{item.name}}====animal:{{item.animal}}</li>
</ul>
</div>
</div>
</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) {
$scope.people = [
{ name: 'anson', animal: 'people' },
{ name: 'andy', animal: 'people' },
{ name: 'coco', animal: 'people' },
{ name: 'lucky', animal: 'dog' },
{ name: 'micky', animal: 'mouse' },
];
$scope.add = function () {
$scope.viewState = 'add';
}
$scope.select = function (item) {
$scope.viewState = 'edit';
$scope.Edit = item;
}
$scope.save = function () {
if ($scope.viewState == 'add') {
$scope.people.push($scope.Add);
}
$scope.viewState = 'list';
}
$scope.cancel = function () {
$scope.viewState = 'list';
}
});
</script>
</body>
</html>
其實這個繼承scope的坑也很惱人，我曾在ng-controller有說到controlleras的方式，其實這個方式可以很好的處理這種scope繼承的陷阱，如下語法
<div ng-controller="FirstCtrl as ctrl">
<input type="button" ng-click="ctrl.add()" value="新增" />
<input type="button" ng-click="ctrl.save()" value="儲存" />
<input type="button" ng-click="ctrl.cancel()" value="取消" />
<hr />
<div ng-switch="ctrl.viewState">
<div ng-switch-when="add">
<input type="text" ng-model="ctrl.Add.name" />
<input type="text" ng-model="ctrl.Add.animal" />
</div>
<div ng-switch-when="edit">
<input type="text" ng-model="ctrl.Edit.name" />
<input type="text" ng-model="ctrl.Edit.animal" />
</div>
<div ng-switch-default>
<ul ng-repeat="item in ctrl.people">
<li><input type="button" ng-click="ctrl.select(item)" value="修改" /> name:{{item.name}}====animal:{{item.animal}}</li>
</ul>
</div>
</div>
</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.people = [
{ name: 'anson', animal: 'people' },
{ name: 'andy', animal: 'people' },
{ name: 'coco', animal: 'people' },
{ name: 'lucky', animal: 'dog' },
{ name: 'micky', animal: 'mouse' },
];
vm.add = function () {
vm.viewState = 'add';
}
vm.select = function (item) {
vm.viewState = 'edit';
vm.Edit = item;
}
vm.save = function () {
if (vm.viewState == 'add') {
vm.people.push(vm.Add);
}
vm.viewState = 'list';
}
vm.cancel = function () {
vm.viewState = 'list';
}
});
</script>
</body>
這個觀念有點複雜，有心想了解的可以把code貼回去玩看看，可以試著把$parent拿掉，然後再試跑看看，就會發現在javascript裡面都取不到值，以上再請大家多多指教，有問題歡迎批評指教，或提出討論。
