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

Question

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

0

Код только кажется спрятанным, когда я нажимаю на элемент, но когда я снова нажимаю элемент, он снова не появляется.

HTML (AngularJS)

<div ng-click="showIt();">Click Me!</div>

<div style="visible:{{tog}};">Hide Me...Then Show Me Again</div>

контроллер:

$scope.showIt=function(){
    if($scope.tog="visible"){
      $scope.tog="hidden";
    }
    else{
      $scope.tog="visible";
    }
}

$scope.tog="visible";

Заранее спасибо:)

MehdiN 22 март 2016, в 04:34

Источник

1

Название стиля на самом деле является visibility , поэтому оно должно быть <div style="visibility:{{tog}};">
adeneo 22 март 2016, в 02:56

Теги:

javascript

html

ionic-framework

angularjs

3 ответа

3

Что относительно директивы ng-show?

<div ng-click="tog = !tog">Click Me!</div>
<div ng-show="tog">Hide Me...Then Show Me Again</div>

olysachok 22 март 2016, в 00:24

0

Это переключает свойство отображения, а не видимость
dmeglio 22 март 2016, в 03:06
0

Не то же самое, что имеет пользователь, но может быть, это то, что пользователь на самом деле после
Arun P Johny 22 март 2016, в 03:08
0

Да, это здорово, но я хочу скрыть div "click me" при нажатии и показать только div "Hide Me ... Then Show Me Again". Кажется, все, что мне нужно было сделать, это изменить "=" на "==". Спасибо :)
MehdiN 23 март 2016, в 14:41

Показать ещё 1 комментарий

0

Рабочий Plnkr

Вы также выполняете это с помощью директивы ng-if:

<div ng-click="showIt();">Click Me!</div>    
<div ng-if="tog">Hide Me...Then Show Me Again</div>

JavaScript:

angular.module('myApp', [])
  .controller('MyController', function($scope) {
    $scope.tog = true;
    $scope.showIt=function(){
    $scope.tog=!$scope.tog
   }

});

Khalid Hussain 22 март 2016, в 01:41

Ещё вопросы

Название стиля на самом деле является visibility , поэтому оно должно быть <div style="visibility:{{tog}};">
Это переключает свойство отображения, а не видимость
Не то же самое, что имеет пользователь, но может быть, это то, что пользователь на самом деле после
Да, это здорово, но я хочу скрыть div "click me" при нажатии и показать только div "Hide Me ... Then Show Me Again". Кажется, все, что мне нужно было сделать, это изменить "=" на "==". Спасибо :)

Arun P Johny · Accepted Answer · 2016-03-22T00-41-00.000Z

Стиль называется visibility также в if вам нужно использовать == not =.

Но лучшим решением будет использование директивы ng-style или использование решения на основе класса

var app = angular.module('my-app', [], function() {})

app.controller('AppController', function($scope) {
  $scope.showIt = function() {
    if ($scope.tog.visibility == "visible") {
      $scope.tog.visibility = "hidden";
    } else {
      $scope.tog.visibility = "visible";
    }
  }
  $scope.showIt2 = function() {
    $scope.hidden = !$scope.hidden;
  }

  $scope.tog = {
    visibility: "visible"
  };
  $scope.hidden = false;
})

.hidden {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app">
  <div ng-controller="AppController">
    <div ng-click="showIt()">Click Me!</div>
    <div ng-style="tog">Hide Me...Then Show Me Again</div>
    <hr />
    <div ng-click="showIt2()">Click Me!</div>
    <div ng-class="{hidden: hidden}">Hide Me...Then Show Me Again</div>
  </div>
</div>

"==" был ответ ... Я буду смотреть в стиле нг на будущее ... Спасибо :)