Question

我只想在用户按下按钮时显示一个div，似乎很容易，但是花了很多时间后我才真的为此疯狂。我的代码是

我的小提琴：http://jsfiddle.net/jmhostalet/4WK7R/1/

<div ng-app>
    <div ng-controller="MyCtrl">
        <div><button id="mybutton" ng-click="showAlert()">Click me</button></div>
        <div>Value: {{myvalue}}</div>
        <div><div ng-show="myvalue" class="hideByDefault">Here I am</div></div>
    </div>
</div>

和我的控制器

function MyCtrl($scope) {

  $scope.myvalue = false;

  $scope.showAlert = function(){
    $scope.myvalue = true;  
  };
}

谢谢！

Answer 1

从CSS中删除display: none;。 AngularJS可以控制显示/隐藏该div。

如果你想默认隐藏它，最初只需将scope.myvalue的值设置为false - 你已经在做了。

Answer 2

<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope) {
            //This will hide the DIV by default.
            $scope.IsVisible = false;
            $scope.ShowHide = function () {
                //If DIV is visible it will be hidden and vice versa.
                $scope.IsVisible = $scope.IsVisible ? false : true;
            }
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <input type="button" value="Show Hide DIV" ng-click="ShowHide()" />
        <br />
        <br />
        <div ng-show = "IsVisible">My DIV</div>
    </div>
</body>
</html>

示例： - http://jsfiddle.net/mafais/4WK7R/380/

Answer 3

这将解决问题。无需在控制器中编写代码。并删除您的CSS样式column(i)

display:none

Answer 4

这很简单：

<button ng-click="hideShow=(hideShow ? false : true)">Toggle</button>

<div ng-if="hideShow">hide and show content ...</div>

Answer 5

如果您想确保默认情况下您的div不可见，请使用ng-cloak类。它将与ngShow指令一起正常工作：

<div><div ng-show="myvalue" class="ng-cloak">Here I am</div></div>

演示：http://jsfiddle.net/4WK7R/4/

Answer 6

从你的js小提琴中删除css，使用myvaue === true。

<div ng-show="myvalue == true" class="ng-cloak">Here I am</div>

Answer 7

我认为你可以创建表达来显示或隐藏

'columnname'

Answer 8

只需从你的jsfiddle中删除css，ng-show就会控制它。 AngularJS将显示样式设置为none（使用！important标志）。并在必须显示时删除此类。

Answer 9

删除class hideByDefault。 Div将保持隐藏，直到myvalue的值为false。

Answer 10

您可以使用ng-class标记。看看http://jsfiddle.net/4WK7R/3/

Answer 11

我用这种方式实现了它

控制器功能：

app.controller("aboutController", function(){
this.selected = true;
this.toggle = function(){
  this.selected = this.selected?false:true;
}
});

<强> HTML：

<div ng-controller="aboutController as about">
 <div ng-click="about.toggle()">Click Me to toggle the Fruits Name</div>
 <div ng-show ="about.selected">Apple is a delicious fruit</div>
</div>

Angularjs - ＆gt; ng-click和ng-show显示div

11 个答案: