선택 값을 기준으로 콘텐츠 표시/숨기기

Question

드롭 다운에서 선택한 특정 값을 기반으로 콘텐츠를 표시하거나 숨기고 싶지만 작동하지 않습니다.

는

$scope.list = { 
    'val1': 'abc', 
    'val2': 'xyz' 
}; 
$scope.selectedVal = 'val1' 
$scope.isEnabled = $scope.selectedVal == 'val1' ? true : false; 

선택 박스의 변화에 ​​

<select ng-model="selectedVal" ng-options="k as v for (k,v) in list"></select> 
<div ng-if="isEnabled"> 
    <span>Show Me</span> 
</div> 

나를보기 html 코드가 잘못 뭐죠/숨김 표시되지 않는 이유는 무엇입니까?

Answer 1

var app = angular.module('app', []); 
 

 
app.controller('fCtrl', function($scope) { 
 
    $scope.list = { 
 
    'val1': 'abc', 
 
    'val2': 'xyz' 
 
    }; 
 
    $scope.selectedVal = 'val1' 
 

 
    $scope.$watch('selectedVal', function() { 
 
    $scope.isEnabled = $scope.selectedVal == 'val1' ? true : false; 
 
    }); 
 

 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="fCtrl"> 
 

 
    <select ng-model="selectedVal" ng-options="k as v for (k,v) in list"></select> 
 

 

 
    <div ng-if="isEnabled"> 
 
     <span>Show Me</span> 
 
    </div>