Angular的ng-show依赖于函数

Question

也许这只是一个基本的误解，但我对Angular和ng-show有一个小问题。

我有一个简单的表单，有三个输入字段。我想显示一个带有infotext的div，但前提是所有三个输入字段都设置了。

我的控制器(与controllerAs-Syntax，别名是'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中。但是如果我设置了所有的输入字段，它不会显示div !如果我将函数中的条件直接放入ng-show中，比如

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

它的工作原理。那么我的问题是:为什么我不能用这个函数作为ng-show的表达式呢?

Answer 1

您没有使用$scope。将函数附加到控制器的作用域，然后就可以开始了:

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

所以在你的HTML中你可以这样写:

ng-show="checkIfAllValuesAreSet()"

记住，$scope是angularjs中一个非常重要的概念。尽量避免使用它，这是一个坏主意。你可以在这里阅读关于$scope的文档

Answer 2

当控制器/模板加载时，ng-show="myControllerCtrl.checkIfAllValuesAreSet()"只会运行一次。因此，如果您更改了表单上的任何内容，则没有任何东西可以再次触发该函数。

您可以简单地将ng-show更改为:

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

Answer 3

您可以使用function作为表达式，但要确保该函数返回boolean。试试这个:

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