かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

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>

たったこれだけで、ボタンを押すと表示するリストを切り替える機能ができました。AngularJSすげぇJSの変更監視してるんだな…。

f:id:okazuki:20140526125008p:plain

f:id:okazuki:20140526125022p:plain