機能に応じて角張った角度表示があります

Question

多分その基本的な誤解かもしれませんが、Angularとng-showに関する小さな問題があります。

私は3つの入力フィールドを持つ簡単なフォームを持っています。 3つの入力フィールドがすべて設定されている場合に限り、情報テキストとともにdivを表示したい。

（別名は 'myControllerCtrl' ですcontrollerAs-構文と、）私のコントローラは以下のようになります。

var vm = this; 

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


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

だから私は、私のdiv内

ng-show="myControllerCtrl.checkIfAllValuesAreSet()" 

を置きます。しかし、すべての入力フィールドを設定すると、divは表示されません！関数から直接ng-showに条件を入れた場合、

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

のように動作します。だから私の質問は：なぜ私はng-showの式として関数を使用できないのですか？

Answer 1

ng-show="myControllerCtrl.checkIfAllValuesAreSet()"は、コントローラ/テンプレートがロードされたときに1回だけ実行されます。したがって、フォーム上で何かを変更した場合、関数を再度トリガーするものはありません。

あなたは単にであるためにあなたのngのショーを変更できます。これらの変更のいずれかの場合は、直ちに更新します

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

。

Answer 2

関数を式として使用できますが、関数がbooleanを返すことを確認してください。これを試してみてください ：あなたは$scopeを使用していない

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

Answer 3

。

が

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

はので、あなたのHTMLにあなたができるようやってます：コントローラの範囲に機能を取り付け、あなたが行ってもいいです

ng-show="checkIfAllValuesAreSet()" 

が覚えて、$scopeは非常に重要な概念ですanglejsの。それを使用しないようにしようとすると悪いアイデアです。 $ scope についてのドキュメントを読むことができます。