angularjs 初使用2

来源：互联网发布：税收数据质量管理编辑：程序博客网时间：2024/05/19 13:06
<!DOCTYPE html><html ng-app="myapp"><head lang="en">    <meta charset="UTF-8">    <title></title>    <script type="text/javascript" src="jquery.1.12.4.js"></script>    <script type="text/javascript" src="angular-1.3.0.js"></script>    <script type="text/javascript">//        $("input[name='name']")        var app = angular.module("myapp",[]);        app.controller('myctrl',function($scope){            $scope.name="";        });    //    //    //        var jsonObj = {url: 'http://www.baidu.com', dataType: 'html'};    </script>    <style>        .sky{            background-color: aqua;        }        .tomato{            background-color:coral;        }    </style></head><body ng-app=""><hr style="background-color: red; height: 5px"><div ng-init="books = [{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">        <tr>            <th>NO</th>            <th>ID</th>            <th>标题</th>            <th>是否推荐</th>            <th>价格</th>        </tr>        <tbody ng-repeat="book in books">        <tr>            <th>{{$index}}</th>            <th>{{book.id}}</th>            <th>{{book.title}}</th>            <th>                <!--<i ng-if="book.isRecommend">是</i>-->                <i ng-hide="!book.isRecommend">是</i>                <i ng-show="!book.isRecommend">否</i>            </th>            <th>{{book.price}}</th>        </tr>        </tbody>    </table>    <hr style="background-color: red; height: 5px">    <p>选择一个类</p>    <select ng-model="world">        <option value="sky">天空色</option>        <option value="tomato">番茄色</option>    </select>    <div ng-class="world">        <h1>Hellow World!</h1>    </div>    <hr style="background-color: red; height: 5px">        <div ng-init="isshow1 = true">            <div ng-if="isshow1">ng-if isshow</div>        </div>    <div ng-init="isshow2 = false">        <div ng-show="isshow2">ng-show isshow</div>    </div>    <div ng-init="isshow3 = false">        <div ng-hide="isshow3">ng-hide isshow</div>    </div>    <hr style="background-color: red; height: 5px">    <div >        输入:<input ng-model="name"><br>        <button ng-click="bb">tt</button>        <h1>你输入了:{{name}}</h1>    </div>    <hr style="background-color: red; height: 5px"></div></body></html>
阅读全文
0 0