TypeScriptとAngularJS「表示非表示を切り替えるng-show ng-hide」

お手軽にDOMの要素の表示非表示を切り替えれるっぽいということで試してみました。バックのTypeScriptは、フラグを1つもったScopeを定義して、それをtrue/falseを切り替えるだけのシンプル実装

/// <reference path="scripts/typings/angularjs/angular.d.ts" />

interface ToggleMenuScope extends ng.IScope {
    isShow: boolean;

    switchMenu(): void;
}

class ToggleMenuCtrl {
    constructor($scope: ToggleMenuScope) {
        $scope.isShow = false;
        $scope.switchMenu = () => {
            $scope.isShow = !$scope.isShow;
        };
    }
}

angular.module("myApp", [])
    .controller("ToggleMenuCtrl", ["$scope", ToggleMenuCtrl]);

HTMLでは、ulにng-showとng-hideをつけたもの2パターン用意しています。

<!DOCTYPE html>

<html lang="ja" ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="Scripts/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <h1>TypeScript HTML App</h1>

    <div id="content" ng-controller="ToggleMenuCtrl">
        <button ng-click="switchMenu()">switch</button>
        <ul ng-show="isShow">
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
        </ul>
        <hr />
        <ul ng-hide="isShow">
            <li>item4</li>
            <li>item5</li>
            <li>item6</li>
        </ul>
    </div>
</body>
</html>