ng-hide가 ng-model에서 작동하지 않습니다.

Question

드롭 다운에서 특정 옵션 선택에 대한 div 표시/숨기기를 원합니다. 하지만 div는 항상 숨어 있습니다.

<select class="form-control" ng-model="Type"> 
        <option>First</option> 
        <option>Second</option> 
        <option>Third</option> 
        <option>Forth</option> 
       </select> 

     <div ng-hide="Type==='First'"> 
     <label>Div Content</div> 
     </div> 

Answer 1

ng-switch 지시어가 훨씬 적합합니다. jsfiddle here

HTML 참조하십시오

<div ng-app="app"> 
    <div ng-controller="Ctrl"> 
     <select ng-model="selection" ng-options="item for item in items"></select> 
     <hr/> 
     <div class="animate-switch-container" ng-switch on="selection"> 
      <div ng-switch-when="first">First option</div> 
      <div ng-switch-when="second">Second option</div> 
      <div ng-switch-when="third">Third option</div> 
      <div ng-switch-when="forth">Forth option</div> 
      <div ng-switch-default>default</div> 
     </div> 
    </div> 
</div> 

JS를 :

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

app.controller('Ctrl', function ($scope) { 
    $scope.items = ['first', 'second', 'third', 'forth']; 

});