ng-show, ng-hide

by dshilkret

HTML

<div ng-app>
    <div ng-controller="showCrtl">
        <div class="block">
            <select ng-model="selection">  
                <option value="area1" >Taipei</option>  
                <option value="area2">Taoyuan</option>  
            </select>
            <div ng-show="selection=='area1'">This is Taipei</div>
            <div ng-show="selection=='area2'">This is Taoyuan</div>
            <input ng-show="true" type="file" accept="image/jpeg,image/png,image/bmp,image/x-windows-bmp,image/gif,image/x-icon,image/svg+xml" ng-file-select="attachFiles({files: $files})" aria-hidden="true" class="ng-hide">
        </div><!--block-->
        <div class="block">
            <input type="checkbox" ng-model="showDom"> 
            <span ng-show="showDom">Show me</span>
        </div>
        <div class="block">
             <input type="checkbox" ng-model="hideDom"> 
            <span ng-hide="hideDom">Hide me</span>            
        </div>
        <div class="block"><div>
        
            <button class="" ng-click="showCon('con1')">Button1</button>   
            <button class="" ng-click="showCon('con2')">Button2</button> 
            <button class="" ng-click="showCon('con3')">Button3</button> 
            </div>
            <div ng-show="clickOn=='con1'">con1</div>
            <div ng-show="clickOn=='con2'">con2</div>
            <div ng-show="clickOn=='con3'">con3</div>
        </div>
    </div>
</div>

CSS

.block{
    height:60px;
}

JavaScript

function showCrtl($scope){
    $scope.showCon=function(con){
        $scope.clickOn=con;
    }
}