(angularjs) 入门

来源：互联网发布：网络妖人再造天txt 编辑：程序博客网时间：2024/06/06 08:43

                       需要导入：   angular-1.3.0.js

下面是代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>angular入门</title>    <script type="application/javascript" src="angular-1.3.0.js"></script></head><body ng-app=""><div>{{8+2}}</div><div>{{10*5}}</div><div>{{2/6}}</div><div>{{9-5}}</div><hr><!--ng-init 指令初始化 AngularJS 应用程序变量。--><div ng-init="user={id:6,name:'张三'}">    <!--ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTM-->    <div>ID：<span ng-bind="user.id"></span></div>    <div>用户名：<span ng-bind="user.name"></span></div></div><hr><!--ng-init 指令初始化 AngularJS 应用程序变量。--><div ng-init="username=['张三','李四','王五']">    <!--ng-repeat 指令会重复一个 HTML 元素： ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。-->    <ul ng-repeat="name in username | limitTo:2"><!--limitTo:限制的意思-->        <li>{{name}}</li>    </ul></div><hr><!--ng-init 指令初始化 AngularJS 应用程序变量。--><div ng-init="usernamea=['zhangsan','lisi','wangwu']">    <ul ng-repeat="name in usernamea | filter:'a'"><!--filter:过滤的意思 -->        <li>{{name}}</li>    </ul>    <hr>    <!--ng-init 指令初始化 AngularJS 应用程序变量。-->    <button ng-init="cishu=0" ng-click="cishu=cishu+1">点击我增加次数</button>    <button ng-init="cishu" ng-click="cishu=cishu-1">点击我减少次数</button>    <p>点击次数：{{cishu}}</p></div><hr><div>    <!--ng-model 指令把输入域的值绑定到应用程序变量 name。-->    姓：<input type="text" ng-model="xing">    名：<input type="text" ng-model="ming"></div><p>姓名：{{xing+ming}}</p><hr></body></html>

上图看看效果：

===========================================================================================

接下来是过滤器：

 <script>        //自定义过滤器        var app=angular.module("ll",[]);        app.filter("upper",function () {            return function (msg ,flag) {                return msg.toUpperCase()  //全都大写            }        })        app.filter("lower",function () {            return function (msg,flag) {                return msg.toLowerCase()  //全都小写            }        })        app.filter("submit",function () {            return function (msg,flag) {                return msg.substr(0,5)    //截取            }        })    </script></head><body 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="1px">    <tr>        <td>序号：</td>        <td>ID：</td>        <td>标题：</td>        <td>是否推荐：</td>        <td>价格</td>    </tr>    <tr ng-repeat=" a in books">        <td>{{$index}}</td>        <td>{{a.id}}</td>        <!--改变这里的名字（submit）给上面的方法用可以实现 截取  全都大写或小写-->        <td>{{a.title | submit}}</td>        <td>            <i ng-show="a.isRecommend">是</i>            <i ng-hide="a.isRecommend">否</i>        </td>        <td>{{a.price}}</td>    </tr></table></body>

上图片：

接下来是自定义指令：

          <script>        //自定义指令        //Angular通过被称为指令的属性来拓展HTML；通过内定指令来为应用添加功能。        var app=angular.module("myApp",[]);        app.directive("myJavabc",function () {            return{                restrict:'ECMA',                template:'你好！！！',  //这里是需要在网页展示的信息                            }        })    </script></head><body ng-app="myApp"><!--我们定义了一个my-hello的指令；   使用directive来完善这个指令，返回一个对象，有3个值，1、restrict共四个值：E：标签指令，C：class指令，M：注释指令，A：属性指令使用方法：--><!--标签指令--><my-javabc></my-javabc><!--class指令--><div class="my-javabc"></div><!--注释指令--><span my-javabc></span><br><!--属性指令--><!-- directive:my-javabc --><!--注意：replace必须为true时，自定义指令的注释才能解析；--></body>

阅读全文

0 0