codesign: [AngularJS] ng-if ng-show ng-hide ngSwitch 지시자

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js'></script>

</head>

<body ng-app>

    <!-- ng-show ng-hide example -->

    <!-- css 변경 방식 -->

    Click me : <input type="checkbox" ng-model="result"><br/>

    <div ng-show="result">this is true</div>

    <div ng-hide="result">this is hide</div><br>

    <!-- ng-show ng-hide example -->

    <!-- dom 변경 방식으로 아예 제거한다 -->

    Click me2 : <input type="checkbox" ng-model="result2" ng-init="result2=true"><br/>

    <span ng-if="result2">this is true</span>

    <span ng-if="!result2">this is hide</span> <br>

    <!-- ngSwidth -->

    <!-- dom 변경 방식으로 아예 제거한다 -->

    <br>

    Check your grade <select ng-model='grade'>

        <option value="A">A</option>

        <option value="B">B</option>

        <option value="C">C</option>

        <option value="D">D</option>

    </select>

    <div ng-switch on="grade">

        <p ng-switch-when="A"> A </p>

        <p ng-switch-when="B"> B </p>

        <p ng-switch-when="C"> C </p>

        <p ng-switch-when="D"> D </p>

        <P ng-switch-default>Nothing</P>

    </div>

</body>

</html>

codesign