нг-если не изменилось на нг-кнопку - PullRequest
Новая
       7

нг-если не изменилось на нг-кнопку

0 голосов
/ 14 ноября 2018

Я хочу изменить слово из меня на ваше использование ng-if в угловых JS. поэтому я использовал этот код: 

 <span class="label-information-text" ng-if="changeValue" >me </span>
                <span class="label-information-text" ng-if="!changeValue"> your</span>
                <span class="label-edit-text pointer" ng-click="change()">CHANGE </span>

и я использовал это js: 

 self.changeValue = true;
        $scope.change = function () {
          if(self.changeValue === false){

            self.changeValue = true;
          console.log('true');
          }
          else{
            self.changeValue = false;
            console.log('false');
          }

        }

Ответы [ 3 ]

0 голосов
/ 14 ноября 2018

Ваша логика верна, но есть небольшое изменение, как показано ниже. 

var app = angular.module('test', []);

app.controller('MainCtrl', function($scope) {
var self = this;

 self.changeValue = true;
        self.change = function () {
          if(self.changeValue === false){

            self.changeValue = true;
          console.log('true');
          }
          else{
            self.changeValue = false;
            console.log('false');
          }

        }
});
<!DOCTYPE html>
<html ng-app="test">

  <head>
    <meta charset="utf-8" />

    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>


    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl as $ctrl">

 <span class="label-information-text" ng-if="$ctrl.changeValue" >me </span>
                <span class="label-information-text" ng-if="!$ctrl.changeValue"> your</span>
                </br>
                <span class="label-edit-text pointer" ng-click="$ctrl.change()">CHANGE </span>
                
              
  </body>

</html>
0 голосов
/ 15 ноября 2018
Директива

ngShow показывает или скрывает данный элемент HTML на основе выражения, предоставленного атрибуту ngShow. Когда выражение ngShow оценивается как ложное значение, затем. CSS-класс ng-hide добавляется к атрибуту class элемента, что делает его скрытым. Если это правда, CSS-класс .ng-hide удаляется из элемента, в результате чего элемент не выглядит скрытым.

ngIf отличается от ngShow и ngHide тем, что ngIf полностью удаляет и воссоздает элемент в DOM, а не изменение его видимости с помощью свойства display css.

Обратите внимание, что когда элемент удаляется с помощью ngIf, его область действия уничтожается и новая область создается при восстановлении элемента.

Вы должны использовать ng-show,

Для успеха.

0 голосов
/ 14 ноября 2018

Вот рабочий код: 

    <button class="btn" ng-click="change()">CHANGE </button>
      <span class="label-information-text" ng-if="changeValue" ><b>ME</b> </span>
    <span class="label-information-text" ng-if="!changeValue"> <b>YOUR</b></span>

JS 

$scope.changeValue = true;
        $scope.change = function () {
          if($scope.changeValue === false){

            $scope.changeValue = true;
          console.log('true');
          }
          else{
            $scope.changeValue = false;
            console.log('false');
          }

        }

Плункер: http://plnkr.co/edit/ndDbpsPiY20BbmSgHqCW?p=preview

...