AngularJS基础练习（2）

来源：互联网发布：淘宝挖掘冷门暴利行业编辑：程序博客网时间：2024/06/05 14:58

需要添加AngularJS工具包

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

基础练习（小实例）：

1. 获取当前时间：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <script type="text/javascript" src="angular-1.3.0.js"></script>    <title></title>    <script>        var app = angular.module("timer", []);        <!-- 一般情况下directive都限制为定义“属性”的方式使用 -->        app.directive("nowTime", function () {            return {                <!-- 关键字restrict:只用于限定指针 -->                <!-- 用于告诉编译器，对象已经被指针所引用，不能通过除该指针外所有其他直接或间接的方式修改该对象的内容 -->                restrict: "EACM",                <!-- 关键字template:定义模板信息 -->                <!-- 调用该对象是，会直接返回模板中定义的信息 -->                <!-- 模板中定义的信息为：获取当前时间的年+月+日+上午/下午+时+分+秒 -->                template: "<h3>" + new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString() + "</h3>",                <!--  replace: 方法执行的是查找并替换的操作 -->                replace: true            }        });    </script></head><body ng-app="timer"><!-- 获取当前时间 --><!-- <now-time>:自定义标签 --><now-time>当前时间：</now-time><!-- 标签: restrict: "E" - Element --><div now-time>当前时间：</div><!-- 属性: restrict: "A" - Attribute --><div class="now-time">当前时间：</div><!-- 类: restrict: "C" --><!-- directive: now-time --> <!-- 注释: restrict: "M" --></body></html>

2.输入输出转化：

<!DOCTYPE html><html ng-app="myApp"><head>    <meta charset="UTF-8">    <script type="text/javascript" src="angular-1.3.0.js"></script>    <title></title>    <script type="text/javascript">        //获取input标签 取出输入的name值        $("input[name='name']")    </script></head><body><div ng-controller="myCtrl">    输入: <input ng-model="name"><br/>    <h1>你输入了: {{name}}</h1></div><script>    var app = angular.module("myApp", []);    app.controller('myCtrl', function ($scope) {        //将上面取到的name值输出        $scope.name = "test";    });</script></body></html>

3.自定义颜色风格：

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <script type="text/javascript" src="angular-1.3.0.js"></script>    <title></title>    <style>        /* 获取到value值，为其定义背景颜色 */        .sky {            background-color: lightblue;        }        .tomato {            background-color: coral;        }    </style>    <script>    </script></head><body ng-app=""><p>选择一个类:</p><select ng-model="world">    <!-- 添加value属性 -->    <option value="sky">天空色</option>    <option value="tomato">番茄色</option></select><div ng-class="world">    <h1>Hello World!</h1></div></body></html>

4.定义table中的各项属性值：

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <script type="text/javascript" src="angular-1.3.0.js"></script>    <title></title>    <script type="text/javascript">        var app = angular.module("myApp", []);        <!-- .filter() // 返回符合一定条件的元素 -->        <!-- 这里的意思是：大写字母过滤器 -->        <!-- .toUpperCase() // 将字符串转换成大写 -->        app.filter("upperCase", function() {            return function(msg, flag) {                return msg.toUpperCase();            }        });        <!-- 这里的意思是：小写字母过滤器 -->        <!-- .toLowerCase() // 将字符串转换成小写 -->        app.filter("lowerCase", function() {            return function(msg, flag) {                return msg.toLowerCase();            }        });        <!-- 这里的意思是：副标题过滤器 -->        app.filter("subTitle", function () {            return function(msg, flag) {                <!-- .substr() // 在字符串中抽取指定数目的字符 -->                <!-- .substr()的参数指定的是:开始位置, 长度 -->                return msg.substr(0, flag);            }        });        <!-- console.log() // 向web控制台输出一条消息 -->        console.log(Math.random());    </script></head><body ng-app="myApp"><div ng-init="books = [{id: 1, title: 'Thinking in Java', isRecommend: false, price: 28}, {id: 2, title: 'Thinking in C++', isRecommend: true, price: 32}, {id: 3, title: 'MySQL', isRecommend: false, price: 26}]">    <table border="1">        <thead>        <tr>            <th>序号</th>            <th>ID</th>            <th>标题</th>            <th>是否推荐</th>            <th>价格</th>        </tr>        </thead>        <!-- book in books // book数据从books集合中获取 -->        <!-- orderBy: 'price' : true" // 排序 ：‘排序条件为价格’ ：真（也就是从大到小） -->        <tbody ng-repeat="book in books | orderBy: 'price' : true">        <tr>            <td>{{ $index }}</td>            <td>{{ book.id}}</td>            <td>{{ book.title | subTitle: 6 }}</td>            <td>                <!-- 显示“是”，隐藏“否”；反之相反 -->                <i ng-show="book.isRecommend">是</i>                <i ng-hide="book.isRecommend">否</i>            </td>            <!-- 填写信息：book价钱值 | 添加货币符号：￥ -->            <td>{{ book.price | currency: "￥"}}</td>        </tr>        </tbody>    </table></div></body></html>

******************<!-- 综合性小练习 -->******************

           **<!-- 实现“掷骰子比大小”的练习 -->**<!DOCTYPE html><html ng-app="myApp"><head>    <meta charset="UTF-8">    <script type="text/javascript" src="angular-1.3.0.js"></script>    <title></title>    <script type="text/javascript">        var rand = function () {            return Math.ceil(Math.random() * 6); // 随机数生成        };        var app = angular.module('myApp', []);        app.controller('myCtrl', function ($scope, $http) {        });        var rollDice = function () {            var appElement = document.querySelector("[ng-controller=myCtrl]"); // 设置包含所有内容的父DIV标签            var $scope = angular.element(appElement).scope();             $scope.zhangsan = rand(); // 将随机数传入scope对象下带有“zhangsan”标识的标签内            $scope.lisi = rand(); // 将随机数传入scope对象下带有“lisi”标识的标签内            $scope.winer = ($scope.zhangsan > $scope.lisi ? "张三" : ($scope.zhangsan < $scope.lisi ? "李四" : "相等")) // 比较“zhangsan”与“lisi”的值            $scope.$apply(); // 同步到Angular控制器中        };    </script></head><body><div ng-controller="myCtrl">    <div>张三：<input ng-model="zhangsan"/></div>    <div>李四：<input ng-model="lisi"/></div>    <div>赢方：<input ng-model="winer"/></div>    <div><input type="button" value="掷骰子" onclick="return rollDice();"/></div></div></body></html>

阅读全文

0 0

AngularJS基础练习（2）

需要添加AngularJS工具包

基础练习 （小实例）：

基础练习（小实例）：