首页 > 代码库 > AngularJS的基础元素应用

AngularJS的基础元素应用

2024-08-18 09:18:07   216人阅读

<!doctype html>
<!-- 标记ng-app告诉AngularJS处理整个HTML页并引导应用 -->

<html ng-app>
    <head>
        <meta charset="UTF-8">
        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
        <script src="js/controllers.js"></script>

        <!-- 当绑定两个花括号在title元素上可以实现我们的目标，但是你或许发现了，页面正加载的时候它们已经显示给用户看了。一个更好的解决方案是使用ngBind或者ngBindTemplate指令，它们在页面加载时对用户是不可见的 -->
        <title ng-bind-template="Google Phone Gallery: {{‘ha ha‘}}">Google Phone Gallery</title>
    </head>
    <body ng-controller="PhoneListCtrl">
        <!-- 双向绑定 ng-model="yourname" -->
        Your name: <input type="text" ng-model="yourname" placeholder="World">
        <hr>
        Hello {{yourname || ‘World‘}}!



        <hr>
        <!-- 从控制器取出数据，迭代显示 -->
        <!-- PhoneListCtrl控制器里面的方法 -->
        Search: <input ng-model="query">

        <!-- 这里的 orderProp会取出控制器里面的默认 orderProp="age" -->
        Sort by:
        <select ng-model="orderProp">
          <option value="name">name order</option>
          <option value="age">age order</option>
        </select>
        <ul>
            <!-- 控制器中 PhoneListCtrl方法定义的变量 phones迭代   ng-repeat迭代元素-->
            <!-- filter函数使用query的值来创建一个只包含匹配query记录的新数组 -->
            <!-- orderBy排序绑定到上面的 orderProp元素 -->
            <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
                {{phone.name}}
                <p>{{phone.snippet}}</p>
            </li>
            <hr>
            <!-- 下面是一些联系 -->
            <p>Total number of phones: {{phones.length}}</p>
        </ul>

        <hr>
        <div ng-controller="HelloWordCtrl">
            测试控制器: {{hello}}
        </div>

        <hr>
        <table>
            <tr><th>row number</th></tr>
            <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i}}</td></tr>
        </table>
    </body>
</html>

 

AngularJS的基础元素应用


联系
我们