AngularJS(一) 

 

 

<!doctype html>
<html ng-app="">          <!-- ng-app指令标记了AngularJS脚本的作用域 -->
<head>
    <meta charset='utf-8'>
    <title>angular js</title>
    <script type="text/javascript" src='http://www.runoob.com/try/angularjs/1.2.5/angular.min.js'></script>
</head>
<body>

    <div>
        your name : <input type='text' ng-model="yourname" ng-init="yourname=''word">  
        <br/>
        <!-- ng-model 指令把元素值（比如输入域的值）绑定到应用程序 -->
        <!-- ng-init 初始化变量值 -->
        
        hello {{yourname}} !  <!-- {{}} 绑定表达式 -->
        <br/>
        helllo <span ng-bind="yourname"></span> <br>    <!-- ng-bind绑定表达式，类似于{{}}-->

        <!-- 添加过滤器 -->
        hello {{yourname|uppercase}} <br>   <!-- 大写 -->   
        hello {{yourname|lowercase}}   <br> <!-- 小写 -->
        hello {{yourname|currency}}   <br> <!-- 转化为货币形式 -->
        <!-- orderBy 见下 -->
        <!-- filter:name见下 -->
        <p>1+2={{1+2}}</p>
    </div>
    



    <div ng-controller="PhoneListCtrl">        <!-- 定义控制器 -->
        <input ng-model='name'>
          <ul>
            <li ng-repeat="phone in phones |orderBy:'snippet'|filter:name">   <!-- ng-repeat遍历数组 -->
             {{phone.name}}
            <p>{{phone.snippet}}</p>
            </li>
          </ul>
    </div>



    <div ng-controller='personcontroller'>
        firstname: <input tyep='text' ng-model="person.firstname"><br>
        lastname:  <input type='text' ng-model="person.lastname"><br>
        myname is {{person.firstname+" "+person.lastname}}
    </div>


    <!-- http -->

    <div ng-controller='customerController'>
        <ul>
            <li ng-repeat="x in names">
                {{x.Name+","+x.Country}}
            </li>
        </ul>
    </div>

    <input type='checkbox' ng-model='mySwitch'>buttton
    <button ng-disabled='mySwitch'>TOUCH ME!</button>


    <p>
        <p ng-show='true'>我是可见的</p>
        <p ng-show='false'>我是不可见的</p>
    </p>
    <p>
        <p ng-hide='true'>我是不可见的</p>
        <p ng-hide='false'>我是可见的</p>
    </p>

    <!-- 事件 -->
    <div ng-controller="clickController">
        <button ng-click="count=count+1">touch me</button>
        <p>{{ count }}</p>
    </div>



    <script type="text/javascript">
        function PhoneListCtrl($scope){     // $scope为控制器对象，phones为控制器对象属性
            $scope.phones=[
                {"name":"nexus s",
                "snippet": "Fast just got faster with Nexus S."},
                {"name":"vivo x3",
                "snippet":"keep moving"},
                {"name":"iphone6",
                "snippet":"make anything impossiable"}
            ];
        }
        
        function personcontroller($scope){
            $scope.person = {
                firstname:"JACK",
                lastname:"Rose"
            }
        }


        function customerController($scope,$http){
            $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")  //数据库文件地址
            .success(function(response){
                $scope.names=response;
            })
        }

        function clickController($scope){
            $scope.count=0;
        }




    </script>
</body>

</html>

 

posted @ 2015-07-18 19:42  Bigdots  阅读(189)  评论(0)    收藏  举报