Angularjs基础知识及示例汇总

angularjs是google开发的一款高大上的前端mvc开发框架。

Angularjs官网:https://angularjs.org/ 官网有demo,访问可能需要FQ

Angularjs中国社区: 适合初学者

引用文件:https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js

使用angular注意

引用angularjs库:https://github.com/litengdesign/angularjsTest/blob/master/angular-1.0.1.... 可以在本节示例的github上下载
需要在你使用的区域加上ng-app="appName",或者直接ng-app(全局)。
设置控制器 ng-controller="Ctrl"。
测试一下示例请注意以下几点

需要在head之前引入angularjs代码,作者使用的是angular-1.0.1.min.js,请注意版本区别。
所有小示例都是在以下区域运行,记得在作用区域加上 ng-app。
下面通过一些小的案例来说明angularjs默认的常见的指令和用法。

hello world程序(双数据绑定)

使用ng-model={{name}}来绑定数据

复制代码 代码如下:


<label for="name">name:</label>
<input type="text" ng-model="name"/>
<hr>
hello:{{name || 'liteng'}}

事件绑定使用小案例

复制代码 代码如下:


<div>
  单价:<input type="number" min=0 ng-model="price" ng-init="price=299">
  数量: <input type="number" min=0 ng-model="quantity" ng-init="quantity=1">  
  <br>
  总价:{{(price) * (quantity)}}
  <dt>
    <dl>注:</dl>
    <dd>涉及html5的input:<a href=""></a></dd>
    <dd>ng-init:设定初始值</dd>
  </dt>
</div>

ng-init:可默认指定属性值

复制代码 代码如下:


<p ng-init="value='hello world'">{{value}}</p>

ng-repeat:用于迭代数据类似于js中的 i for info

复制代码 代码如下:


<div ng-init="friends=[{name:'Jhon',age:25},{name:'Mary',age:28}]"></div>
  <p>我有{{friends.length}} 朋友.他们是</p>
  <ul>
    <li ng-repeat="friend in friends">
      [{{$index+1}}]:{{friend.name}}年龄为:{{friend.age}}
    </li>
   </ul>

ng-click:dom的点击事件

复制代码 代码如下:


<div ng-controller="ctrl">
  <button ng-dblclick='showMsg()'>{{a}}</button>
</div>
<script>
    function ctrl($scope){
      $scope.a='hello';
      $scope.showMsg=function(){
        $scope.a='world';
      }
     }
  </script>

ng-show:设置元素显示

注:ng-show="!xx":在属性值前面加!表示确定显示,如果不加!表示不确定则不显示

复制代码 代码如下:


<div ng-show="!show">
  ng-show="!show"
</div>
<div ng-show="show">
  ng-show="show"
</div>

ng-hide:设置元素隐藏

复制代码 代码如下:


<div ng-hide="aaa">
  ng-hide="aaa"
</div>
<div ng-hide="!aaa">
  ng-show="!aaa"
</div>

运用ng-show制作toggle效果

复制代码 代码如下:


<h2>toggle</h2>
  <a href ng-click="showLog=!showLog">显示logo</a>
  <div ng-show="showLog">
    <img ng-src="" alt="">
  </div>

ng-style:和默认style类似

这里请注意书写格式:字符串需要用引号包含

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgxyxz.html