zoukankan      html  css  js  c++  java
  • AngularJS的基础元素应用

    <!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>
  • 相关阅读:
    Jmeter使用自定义编写代码
    Jmeter关于断言
    Jmeter之函数助手
    无界面运行Jmeter压测脚本 --后知者
    接口测试全流程总结
    全面的功能测试点总结
    简述核心网
    题1:一个手机H5测试页面,页面上有一个文本输入框和一个次数的按键---测试用例编写
    2019 版_Python 常见的 170 道面试题全解析:编码规范
    2019 版_Python 常见的 170 道面试题全解析:语言特性
  • 原文地址:https://www.cnblogs.com/shaoshao/p/6018811.html
Copyright © 2011-2022 走看看