Angularjs → ng-click и ng-show, чтобы показать div

Я пытаюсь просто показать 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;  
  };
}

Спасибо!

Ответ 1

Просто избавитесь от display: none; от вашего CSS. AngularJS контролирует отображение/скрытие этого div.

Если вы хотите скрыть его по умолчанию, просто установите значение scope.myvalue в значение false изначально - это вы уже делаете.

Ответ 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/

Ответ 3

Это решит проблему. Нет необходимости писать код в контроллере. И удалите стили css display:none

<div><button id="mybutton" ng-click="myvalue=true">Click me</button></div>

Ответ 4

Если вы хотите убедиться, что ваш div не отображается по умолчанию, используйте вместо этого класс ng-cloak. Он будет корректно работать с директивой ngShow:

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

Демо: http://jsfiddle.net/4WK7R/4/

Ответ 5

Просто удалите css из скрипта js, используйте myvaue === true.

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

Ответ 6

Я думаю, вы можете создать выражение, чтобы показать или скрыть

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

Ответ 7

Просто удалите css из js скрипки, ng-show будет управлять им. AngularJS устанавливает стиль отображения не равным (с использованием важного флага). И удалите этот класс, когда он должен быть показан.

Ответ 8

удалить класс hideByDefault. Div останется скрытым до тех пор, пока значение myvalue не станет ложным.

Ответ 9

Вы можете использовать тег ng-class. Посмотрите http://jsfiddle.net/4WK7R/3/

Ответ 10

Очень просто сделать это:

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

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

Ответ 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>