html5_AngularJs简单使用2

来源：互联网发布：java接收上传图片表单编辑：程序博客网时间：2024/05/20 18:41
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script type="text/javascript" src="angular-1.3.0.js"></script>    <style>        .sky {            background-color: lightblue;        }        .tomato {            background-color: coral;        }    </style>    <script>        var app = angular.module("myApp", []);        app.filter("upperCase", function() {            return function(msg, flag) {                return msg.toUpperCase();            }        });        app.filter("subTitle", function() {            //flag是subTitle:后面的   6            return function(msg, flag) {                return msg.substr(0,flag);            }        });        app.controller('myCtrl', function ($scope) {            $scope.name = "";        });    </script></head><body ng-app="myApp"><div ng-init="book = [{id: 1, title: 'Java编程思想', isRecommend: false, price: 28}, {id: 2, title: 'C++编程思想', isRecommend: true, price: 32}, {id: 3, title: '高性能MySQL', isRecommend: false, price: 26}]">    <table border="1" cellpadding="10" cellspacing="0">        <tr>            <th>NO</th>            <th>ID</th>            <th>标题</th>            <th>是否推荐</th>            <th>价格</th>        </tr>        <tr ng-repeat="b in book">            <td>{{$index}}</td>            <td>{{b.id}}</td>            <td>{{b.title  | subTitle: 6 | upperCase }}</td>            <td>                <i ng-if="b.isRecommend">是</i>                <i ng-if="!b.isRecommend">否</i>            </td>            <td>{{b.price}}</td>        </tr>    </table></div><select ng-model="a" style="margin-top: 100px">    <option value="sky">天空色</option>    <option value="tomato">番茄色</option></select><h1 ng-class="a">Hello World!</h1><div ng-controller="myCtrl">    输入: <input ng-model="name"><br/>    <h1>你输入了: {{name}}</h1></div></body></html>
阅读全文
1 0