2014-04-29 44 views
0

我想顯示/隱藏一些元素,當用戶點擊某些按鈕如何顯示和隱藏的角度在我的情況

我有3個按鈕。

<a href='#' ng-click = 'show()'>button 1</a> 
<a href='#' ng-click = 'show()>button 2</a> 
<a href='#' ng-click = 'show()>button 3</a> 

有3個元素

<img src='img1' ng-show='img1Show'/> 
<img src='img1' ng-show='img2Show'/> 
<img src='img1' ng-show='img3Show'/> 

協調我的控制下

$scope.img1Show = true; 
    $scope.img2Show = true; 
    $scope.img3Show = true; 

$scope.show = function(){ 
     //I want to control show and hide status 
} 

按鈕1單擊一次將顯示圖像1,然後再次單擊將隱藏圖像1 。

我想知道這樣做的最有效的方法。我真的需要img1Showimg3Show嗎?謝謝。

+0

什麼比擁有範圍就像你做一個簡單的變量更有效?也許我不明白這個問題。 – akonsu

+0

我只是想知道是否有更好的方法來做到這一點。 – FlyingCat

回答

1

我寫了一個現場演示給你。 檢查出來的 http://plnkr.co/edit/jAWkDU

<!DOCTYPE html> 
<html ng-app="plunker"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.2.16/angular.js" data-semver="1.2.16"></script> 
    <script src="app.js"></script> 
    </head> 

    <body ng-controller="MainCtrl"> 
    <a href="#" ng-click="show1 = true">show 1</a> 
    <a href="#" ng-click="show2 = true">show 2</a> 
    <a href="#" ng-click="show2 != show2">toggle 2</a> 


    <h1 ng-show="show1">11111</h1> 
    <h1 ng-show="show2">22222</h1> 
    </body> 

</html> 
1

Angular是一個數據綁定框架。你需要三個變量來確定每個img的狀態。

但是show()不是必需的。

您可以直接撥動他們的ng-click

<a href='#' ng-click="img1Show = !img1Show">button 1</a> 
<a href='#' ng-click="img2Show = !img2Show">button 2</a> 
<a href='#' ng-click="img3Show = !img3Show">button 3</a> 
相關問題