LoginSignup
11
11

More than 5 years have passed since last update.

[AngularJS][tips] Toggle ボタン作ってみた

Last updated at Posted at 2014-05-30

最近ちまたで大流行?の AngularJS で Toggle してみたのでメモっておく.

やってることは

ng-click="hoge=!hoge"

ってやってるだけです.

Sample

こちら

Code

<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="UTF-8" />
        <title>AngularJS Sample</title>
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
        <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
        <style>
        body {
            padding: 50px;
        }
        </style>
        <script>
        function SampleCtrl($scope) {
            $scope.flag = true;
        };
        </script>
    </head>
    <body>
        <div ng-controller="SampleCtrl" class="container">
            <button class="btn btn-info btn-lg" ng-click="flag=!flag" ng-class="{open:flag}">{{flag}}</button>
        </div>
    </body>
</html>

お手軽♪

11
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
11