Angular test

by ipoly

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.1/angular-touch.min.js"></script>
<div class="container-fluid" ng-app='myApp'>
    <ul class="nav nav-pills" ng-init='profile=1'>
        <li ng-repeat='item in [1,2,3,4]' ng-class='{active: profile==item}'> <a href="#" ng-click='$parent.profile=item'>Profile{{item}}</a>

        </li>
    </ul>
    <section ng-switch='profile'>
        <p>angular只更新相应的节点，不会更新整个模板</p>
        <div ng-switch-when='1' class="panel panel-default">
            <div class="panel-body">
                这个面板应用了ngSwitch，切换的时候节点会更新掉
                <input type="text" class='form-control' ng-model='$parent.input' placeholder='Input something'/>
            </div>
        </div>
        <div ng-switch-when='2' class="panel panel-default">
            <div class="panel-body">
                <label class="checkbox-inline">
                    <input type="checkbox" ng-model='$parent.checkbox' name='checkbox' ng-true-value="option1" />1</label>
                <label class="checkbox-inline">
                    <input type="checkbox" ng-model='$parent.checkbox' name='checkbox' ng-true-value="option2" />2</label>
                <label class="checkbox-inline">
                    <input type="checkbox" ng-model='$parent.checkbox' name='checkbox' ng-true-value="option3" />3</label>
            </div>
        </div>
        <div ng-switch-when='3' class="panel panel-default">
            <div class="panel-body">Basic panel example 3</div>
        </div>
        <div ng-switch-when='4' class="panel panel-default">
            <div class="panel-body">Basic panel example 4</div>
        </div>
    </section>
    <p>Input: <input type="text" class='form-control' ng-model='input' placeholder='双向绑定的内容'/></p>
    <p>Checkbox: {{checkbox}}</p>
    <p><input type="text" class='form-control' placeholder='未绑定数据的内容,不会随着其他的部分刷新'/></p>
</div>

JavaScript

angular.module('myApp', ['ngTouch']);