SureshMunna Ответов: 1

Как скрыть один div-код, когда я выбираю другой div с помощью кнопки click в HTML.

Я написал код, чтобы скрыть содержимое изначально. всякий раз, когда я нажимаю на кнопку, она отображает это содержимое данных. Аналогичным образом я создал другую кнопку с тем же поведением, о котором упоминал.Теперь проблема в том, что когда я нажимаю на эти кнопки одну за другой, содержимое этих кнопок отображается на странице.Мне нужно скрыть содержимое одной кнопки, когда я нажимаю на другую кнопку. Может у PLZ помочь мне исправить это??

Что я уже пробовал:

HTML:
Кнопка button1:
<button type="button" value="click1"  ng-click="show=!show"><font color="white">Display1</font></button>


<div  ng-show="show">
Helloo hyderabad.
</div>

Button2:
<pre>  <button type="button" value="click1"  ng-click="show1=!show1"><font color="white">Display1</font></button>

<div  ng-show="show1">
Helloo hyderabad.
</div>

JS:
app.controller('MainCtrl', function ($scope) {
    $scope.show = false; // Hide it initially 


});

app.controller('MainCtrl', function ($scope) {
    $scope.show1 = false; // Hide it initially 


});

1 Ответов

Рейтинг:
2

Zalak Artist

Попробуйте этот код. Вы можете создать функцию для кнопок и написать код для скрытия содержимого в ней.

<div ng-controller="MainCtrl" ng-app="application">
    
    <button type="button" value="click1" ng-click="ButtonClicked1()"><font color="white">Display1</font></button>

    <button type="button" value="click1" ng-click="ButtonClicked2()"><font color="white">Display1</font></button>

    <div ng-show="show">
        Helloo hyderabad1.
    </div>

    <div ng-show="show1">
        Helloo hyderabad2.
    </div>

</div>

<script>

    var app = angular.module('application', []);
    app.controller('MainCtrl', function ($scope) {
        $scope.show = false; // Hide it initially 

    });

    app.controller('MainCtrl', function ($scope) {


        $scope.show1 = false; // Hide it initially 

        $scope.ButtonClicked1 = function () {
            $scope.show = !$scope.show;
            $scope.show1 = false
        }

        $scope.ButtonClicked2 = function () {
            $scope.show1 = !$scope.show1;
            $scope.show = false
        }

    });


</script>