Подтвердить что ты не робот

Ng-show = "true", но все еще имеет class= "ng-hide"

Я новичок в AngularJS, поэтому для моей проблемы может быть простое решение. Я работаю над этой формой. У меня есть два входа - один для количества дверей, а один - для количества окон. Затем у меня есть несколько div, которые я хочу показать, если они встречают определенное количество полных дверей и окон. Когда я вводим числа во вход, ng-show разрешает "true". Но элемент все еще имеет класс "ng-hide" на нем, который все еще оставляет его скрытым.

Вот пример моего кода:

<body ng-app>
Doors: <input type="number" ng-model="doors"><br>
Windows: <input type="number" ng-model="windows"><br>

<div ng-show="{{(doors + windows) < 6}}">
  Shows if you have 0-5 doors and windows combined.
</div>
<div ng-show="{{(doors + windows) > 5 && (doors + windows) < 11}}">
  Shows if you have 6-10 doors and windows combined.
</div>
<div ng-show="{{(doors + windows) > 10 }}">
  Shows if you have more than 10 doors and windows combined.
</div>
</body>

Здесь вывод, когда я вхожу в 3 двери и 4 окна:

<div ng-show="false" class="ng-hide">
  Shows if you have 0-5 doors and windows combined.
</div>
<div ng-show="true" class="ng-hide">
  Shows if you have 6-10 doors and windows combined.
</div>
<div ng-show="false" class="ng-hide">
  Shows if you have more than 10 doors and windows combined.
</div>
4b9b3361

ОТВЕТЫ

Ответ 1

ngShow принимает выражение Angular, поэтому вам не нужны двойные фигурные скобки.

Это будет работать для вас:

<div ng-show="(doors + windows) < 6">
  Shows if you have 0-5 doors and windows combined.
</div>
<div ng-show="(doors + windows) > 5 && (doors + windows) < 11">
  Shows if you have 6-10 doors and windows combined.
</div>
<div ng-show="(doors + windows) > 10">
  Shows if you have more than 10 doors and windows combined.
</div>

демонстрационная скрипка

Чтобы понять, почему можно посмотреть исходный код ngShow:

var ngShowDirective = ['$animate', function($animate) {
  return function(scope, element, attr) {
    scope.$watch(attr.ngShow, function ngShowWatchAction(value){
      $animate[toBoolean(value) ? 'removeClass' : 'addClass'](element, 'ng-hide');
    });
  };
}];

Ключ в том, что он ставит часы на attr.ngShow. Когда вы устанавливаете этот атрибут на {{(doors + windows) < 6}}, первое, что происходит, - это выражение в двойных фигурных скобках. В вашем случае двери и окна начинают undefined, поэтому выражение оценивается как false. Затем в атрибут передается false. Таким образом, $watch помещается на false, и каждый цикл $digest false проверяется, а false остается false, поэтому функция часов никогда не запускается.

Важно отметить, что сам атрибут не просматривается, но просматривается значение, которое было первоначально передано. Поэтому, хотя позже вы измените атрибут на "true" и увидите это изменение в html, которое никогда не замечалось часами.

Если вместо этого мы передаем (doors + windows) < 6 как attr.ngShow, то на каждом $digest выражение $watch оценивает это выражение. И всякий раз, когда результат выражения изменяется, вызывается функция часов и соответствующий набор классов.