AngularJS基础练习（1）

来源：互联网发布：php 取字符串前几位编辑：程序博客网时间：2024/05/22 10:19

需要添加AngularJS工具包

<script type="text/javascript" src="angular-1.3.0.js"></script>

基础练习：

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <script type="text/javascript" src="angular-1.3.0.js"></script>    <title></title></head><body ng-app="">        <!-- ng-app= "" -->            <!-- 有时，标签中只要写ng-app，而有时却要用ng-app=”MyApp”之类的带具体值的写法，那两者区别在哪呢？-->                <!-- 如果在js文件中的写法是直接用函数定义controller，例如： -->                    <!-- var mycontroller = function($scope){ -->                    <!-- $scope.msg = 'hello'; -->                    <!-- } -->                <!-- 那么在html中只需要用ng-app声明即可 -->                <!-- 如果在js文件中是用module的方式来声明controller，例如：-->                    <!-- var app = angular.module('MyApp', []); -->                    <!-- app.controller('mycontroller ',function($scope){ -->                    <!-- $scope.msg = 'hello'; -->                    <!-- }); -->                <!-- 那么在html中就要声明ng-app=”MyApp”，否则是无法使用mycontroller的。--><!--在AngularJS中，运算公式要写在两个大括号{{ * * * }}中，代码执行后会直接输出运算结果 --><div>{{8 + 2}}</div> <!-- 加法运算 --><div>{{8 - 2}}</div> <!-- 减法运算 --><div>{{8 / 2}}</div> <!-- 乘法运算 --><div>{{8 * 2}}</div> <!-- 除法运算 --><div>{{ true && false }}</div> <!-- 返回false -->    <!-- &&表示相与，也就是 A 和 B -->        <!-- 实际表现为：在满足条件A的同时，也要满足条件B（二选二，三选三，多选多）--><div>{{ true || false }}</div> <!-- 返回true -->    <!-- ||表示相或，也就是 A 或者 B -->        <!-- 实际表现为：满足条件A，或者满足条件B（二选一，三选一，多选一）--><div>{{ !true }}</div> <!-- 不等于true，也就是等于flase --><div>{{ !false }}</div> <!-- 不等于flase，也就是等于true --><hr><!-- ng-init="" // 执行自定义的变量或表达式 --><!-- {id: 1, name: '张三'} // 定义id的属性， name的属性 --><div ng-init="user = {id: 1, name: '张三'}">    <!-- ng-bind="" // 使用自定义的变量或表达式的值来替换 HTML 元素的内容 -->    <div>ID: <span ng-bind="user.id"></span></div>    <div>用户名: <span ng-bind="user.name"></span></div></div><hr><!-- ng-repeat="" // 循环输出指定次数的 HTML 元素 --><!-- "name in usernames | limitTo: 2" // 将username中的值传给name | 限制字符串显示的字符长度--><div ng-init="usernames = ['张三', '李四', '王五']">    <ul ng-repeat="name in usernames | limitTo: 2">        <li>{{ name }}</li>    </ul></div><hr><!-- filter: 'a' // 将匹配元素集合缩减为匹配指定选择器的元素--><!-- 示例中的意思为：将username_en集合压缩到name变量元素中，使用name可以获取到username_en中的内容 --><div ng-init="usernames_en = ['zhangsan', 'lisi', 'wangwu', 'zhaolu']">    <ul ng-repeat="name in usernames_en | filter: 'a'">        <li>{{ name }}</li>    </ul></div><hr><!-- ng-init="clickNum = 0" // 设置点击数 = 0 --><!-- ng-click="clickNum = clickNum + 1" // 设置点击事件：点击数 = 点击数 +  --><!-- 也就是，当前点击数为N，点击一次，点击数就会变为 N+1 --><button ng-init="clickNum = 0" ng-click="clickNum = clickNum + 1">点击我，增加次数</button><!-- {{ clickNum }} // 将点击数输出 --><p>点击次数：<i>{{ clickNum }}</i></p>************<!-- 综合性小练习 -->************<div ng-init="books = [{id: 1, title: 'Java编程思想', isRecommend: false, dtCreated: '00-00 00:01'}, {id: 1, title: 'C++编程思想', isRecommend: true, dtCreated: '00-00 00:02'}, {id: 1, title: '高性能MySQL', isRecommend: false, dtCreated: '00-00 00:03'}]">    <table border="1">        <tr>            <th>NO</th>            <th>ID</th>            <th>标题</th>            <th>是否推荐</th>            <th>价格</th>        </tr>        <tbody ng-repeat="book in books">        <tr>            <td>{{$index}}</td>            <td>{{book.id}}</td>            <td>{{book.title}}</td>            <td>                <i ng-if="book.isRecommend">是</i>                <i ng-if="!book.isRecommend">否</i>            </td>            <td>{{book.price}}</td>        </tr>        </tbody>    </table></div></body></html>

阅读全文

0 0