기능에 따라 Angular ng-show가 표시 될 수도 있습니다.

Question

어쩌면 그저 기본적인 오해 일 수도 있지만 Angular 및 ng-show와 관련된 작은 문제가 있습니다.

3 개의 입력 필드가있는 간단한 양식이 있습니다. 정보 텍스트로 div를 보여주고 싶지만 세 개의 입력 필드가 모두 설정되어 있어야합니다.

내 컨트롤러처럼 보이는 (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-쇼를 변경할 수 있습니다 :

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은 매우 중요한 개념이다 angularjs의. 그것을 사용하는 것을 피하는 것은 불량 아이디어이다. $ scope here에 대한 문서를 읽을 수 있습니다.