Question

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

我有一个包含三个输入字段的简单表单。我想显示带有信息文本的div，但前提是所有三个输入字段都已设置。

我的控制器（带有controllerAs-Syntax，Alias是＆＃39; myControllerCtrl＆＃39;）看起来像这样：

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 here的文档。

Answer 2

您的ng-show="myControllerCtrl.checkIfAllValuesAreSet()"只会在加载控制器/模板时运行一次。因此，如果您更改表单上的任何内容，则无法再次触发该功能。

您只需将您的ng-show更改为：

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

如果其中任何一项发生变化，将立即更新。

Answer 3

您可以将函数用作表达式，但请确保该函数返回boolean。试试这个：

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

Angular ng-show取决于函数

3 个答案: