Угловое ng-шоу в зависимости от функции

Question

Возможно, это просто основное недоразумение, но у меня есть небольшая проблема относительно Angular и ng-show.

У меня простая форма с тремя полями ввода. Я хочу показать div с infotext, но только если установлены все три поля ввода.

Мой контроллера (с controllerAs-синтаксисом, псевдоним 'myControllerCtrl') выглядит следующим образом:

var vm = this; 

vm.annualConsumption = null; 
vm.calorificVal = null; 
vm.zNumber = null; 
vm.checkIfAllValuesAreSet = checkIfAllValuesAreSet; 


function checkIfAllValuesAreSet() { 
    return vm.annualConsumption && vm.calorificVal && vm.zNumber; 
} 

Так что я положил

ng-show="myControllerCtrl.checkIfAllValuesAreSet()" 

в моих делах. Но он не покажет div, если я установил все поля ввода! Если я положил условие из функции непосредственно в ng-show, например

ng-show="vm.annualConsumption && vm.calorificVal && vm.zNumber" 

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

Answer 1

Ваш ng-show="myControllerCtrl.checkIfAllValuesAreSet()" будет запускаться только при загрузке контроллера/шаблона. Поэтому, если вы меняете что-либо в своей форме, нет ничего, чтобы вызвать функцию снова.

вы могли бы просто изменить нг-шоу, чтобы быть:

ng-show="vm.annualConsumption && vm.calorificVal && vm.zNumber" 

, который будет обновляться сразу же, если какой-либо из этих изменений.

Answer 2

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

function checkIfAllValuesAreSet() { 
if(vm.annualConsumption !=null && vm.calorificVal !=null && vm.zNumber !=null){ 
return true; 
} 

Answer 3

Вы не используете $scope. Установите функцию в сферу действия контроллера, и вы хорошо идти:

$scope.checkIfAllValuesAreSet = function() { 
    return vm.annualConsumption && vm.calorificVal && vm.zNumber; 
} 

так в вашем HTML вы будете в состоянии сделать:

ng-show="checkIfAllValuesAreSet()" 

помните, $scope являются очень важным понятием угловых. Пытаясь избежать его использования, это идея bad. Вы можете прочитать документы о $ scope here.