码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS(一)

时间:2015-07-18 21:09:04      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:

<!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>



    <script type="text/javascript">
    function PhoneListCtrl($scope){
        $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"
        }
    }
    </script>
</body>

</html>

 

AngularJS(一)

标签:

原文地址:http://www.cnblogs.com/yzg1/p/4657439.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!