2016년 1월 22일 금요일

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!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>
cs


댓글 없음:

댓글 쓰기