2016-09-28 3 views
0

У меня есть два <div> в моем html-файле. Первый <div> содержит кнопку, которая, когда я нажимаю, должен показать другой div и скрыть первый. Мой код выглядит примерно так:Показать другое Div, когда я нажал кнопку на предыдущем Div

<div class="container" ng-hide="showme"> 
    <p>Quick</p> 
    <button class="button" ng-click="showme=true" >Edit</button> 
</div> 
<div class="container" ng-show="showme"> 
    <p>Congratulations!</p> 
</div> 

Как я могу это сделать?

+0

Есть ли у вас какое-либо JavaScript? –

+0

@JoeyWood У меня еще нет javascript – bleykFaust

ответ

1

Это проще с JQuery просто написать

$(document).ready(function(){ 
     $("#Button-id").click(function(){ 
      $(this).parent().css("display","none"); 
      $(this).parent().next().css("display","block"); 
     }); 
    }); 

https://jsfiddle.net/sy1x1xm9/

+0

Спасибо, что это работает, но я забыл упомянуть, что использую angularjs. Кстати, я могу использовать этот tho, но кажется, что javascript вызывал класс кнопки, у меня есть несколько кнопок с тем же классом, я попробовал добавить id и вызываемый id на javascript, но он, похоже, не работает – bleykFaust

+0

Извините, что я начинающий angularjs –

+0

, но подождите, почему id не работает? –

0

Просто создайте переменную в вашем JavaScript.

var showme = false; 

Затем добавьте кнопку OnClick, который обновляет значение ShowMe

0

ваш код не кажется ничего плохого, так Whats вашей проблемы? showme, которые связываются с ng-show означает $scope.showme, и вы должны вводить $scope в контроллере, если вы хотите, чтобы показать кнопку init.you следует определить $scope.showme = true

+0

@Qlsoa его не работает – bleykFaust

+0

вы можете увидеть его код [code address] (http://plnkr.co/edit/a39tguEWwb0jGACkp6vE?p=info) –

+0

Почему это не работает, y коды? Я объявил scope showme в моем контроллере и объявил его ложным, но это все еще не работает – bleykFaust

0

Set ShowMe в области видимости переменных в контроллере или директивы в зависимости от того используется как

$ scope.showme = true;

Затем используйте это переменную области действия в целях обновления РОМА:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <body> 

    <div ng-app="myApp" ng-controller="myCtrl"> 

     <div class="container" ng-hide="showme"> 
      <p>Quick</p> 
      <button class="button" ng-click="showme=true">Edit</button> 
     </div> 
     <div class="container" ng-show="showme"> 
      <p>Congratulations!</p> 
     </div> 
    </div> 

    <script> 
    var app = angular.module('myApp', []); 
    app.controller('myCtrl', function($scope) { 

      $scope.show = true; 
    }); 
    </script> 

Надеется, что это помогает

Смежные вопросы