web-dev-qa-db-ja.com

Angular.js divの可視性を切り替える

ボタンをクリックすると、divテキストを切り替えようとしています。スコープ変数を取得し、変数に基づいてクラス名をトグリングしてみました。どこで間違いを犯していますか ここ

<button ng-click="toggle()">test </button>
    <div ng-class="{{state}}" >
        hello test
    </div>


function ctrl($scope) {    
    $scope.state = vis;
    $scope.toggle = function () {
      state = !state;
    };
}

 .vis{
      display:none;
}
javascripthtmlcssangularjstoggle
12
Kurkula

これをとても簡単にできます

<button ng-click="showDiv = !showDiv">test </button>
<div ng-show="showDiv" >
    hello test
</div>

フィドルの例

トグルする特定のngクラスが必要な場合を除き、その場合は次のようなことができます

<button ng-click="showDiv = !showDiv">test </button>
<div ng-class="{'vis' : showDiv }" >
    hello test
</div>

フィドルの例

（angular）の新しいバージョンを使用していることを確認してください）

29
ajmajmajma

指令を変更しました。

html

    <button ng-click="toggle()">test </button>
<div ng-show="state" >
    hello test
</div>

コントローラー

function ctrl($scope) {    

    $scope.toggle = function () {
      $scope.state = !$scope.state;
    }; }

完全なコードはこちらをご覧ください http://jsfiddle.net/nw5ndzrt/345/

13
Kashif Mustafa

別のアプローチ...ng-switchを使用
CSSの手間をかけずに複数のdivを切り替えることができます...

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
 
}
<script src="https://code.angularjs.org/angular-1.0.1.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
        <button ng-click="showDiv = !showDiv">test </button>
        <div ng-switch="showDiv" >
          <div ng-switch-default>
                hello you
          </div>
          <div ng-switch-when=true>
                hello me
          </div>
        </div>
</div>
</body>
2
Gi1ber7