angularJs-3

来源：互联网发布：韩国第一淘宝模特短发编辑：程序博客网时间：2024/04/29 08:22

过滤器扩展部分
   --可组合使用过滤器

过滤器不仅可以在表达式中使用，也可以在js中使用是通过服务的方式实现的。

JS中使用过滤器
   --$scope/$rootScope/$timeout
   --$filter 这些都是通过服务注入的方式，进行修改的

var m1 = angular.module('myapp',[]);
  m1.filter('firstA',function(){
     return function(str,arg){
         if(arg){
            return str.charAt(0).toUpperCase()+ str.substring(0,(arg-1) )
         }else{
         return str.charAt(0).toUpperCase()+ str.substring(1);
        }
     }
  })
  m1.controller('Aaa',['$scope','$filter',function($scope,$filter){
     $scope.name = $filter('firstA')('information','2');
  }])

自定义过滤器
angular.module
   --controller/run
   --filter 是模块下的一个方法，自定义过滤器

ng-repeat  指令,遍历一个数组
学过的指令有：
ng-app
ng-controller
ng-model
ng-click
ng-repeat='data in dataList'//{{data}}

 var m1 = angular.module('myaap',[]);
  m1.controller('aaa',['$scope',function($scope){
     
  $scope.name = "anikin"
  $scope.str = ["aaa","vvv","sas"];
  }])

 <ul ng-controller="aaa">
      <li ng-repeat=" data in str">{{data}}</li>
   </ul>

遍历集合
通过in的方式遍历每一项
实例
表格的操作

<script>
 var m1 = angular.module('myaap',[]);
 var arr= [ {name:"anikin",age:27,sex:"男"},{name:"jack",age:23,sex:"男"},{name:"rose",age:26,sex:"女"}];
  m1.controller('aaa',['$scope','$filter',function($scope,$filter){  
  $scope.name = "anikin"
  $scope.str = arr;
  $scope.fnSort = function(arg)
  {
  $scope.str = $filter('orderBy')($scope.str,arg); 
  }
  $scope.fnFailVal = function()
  {
 $scope.str = $filter('filter')(arr, $scope.fnFail);  
  }  
  }])
</script>
</head>
<body>
<div class="container" ng-controller="aaa">
     <input type="search" ng-model="fnFail"/><input type="button" value="search" class="btn" ng-click="fnFailVal()" />
     <table class="table table-bordered">
        <tr>
          <td ng-click=" fnSort('name')">name</td>
          <td ng-click=" fnSort('age')">age</td>
          <td ng-click=" fnSort('sex')">sex</td>
        </tr>
        <tr ng-repeat=" data in str">
          <td >{{data.name}}</td>
          <td >{{data.age}}</td>
          <td >{{data.sex}}</td>
        </tr>     
     </table>

ng-repeat的扩展功能：
ng-repeat 指令只有合法的嵌套才行，非法嵌套会没作用
扩展部分
$index
$first：第一项为真，其余的返回假
$middle 中间全为真，收尾为假
$last 最后一行
$even
$odd 偶数行true
ng-repeat-start 实现兄弟节点之间的循环操作
ng-repeat-end

 <p ng-repeat="data in datas" class="{{ $odd ? 'red':'blue' }}">{{data}}</p>
<div ng-repeat-start="data in datas">div{{data}}</div>
<p >p{{data}}</p>
<div ng-repeat-end="data in datas">div{{data}}</div>

事件指令--支持表达式相比原声的
ng-click/dblclick双击
ng-mousedown/up
ng-mouseenter/leave
ng-mousemove/over/out
ng-keydown/up/press
ng-focus/blur
ng-submit

ng-selected
ng-change 配合ng-model
ng-copy
ng-cut
ng-paste

1;   .ng-selected
<input type="checkbox" ng-model="aaa" >
      <select>
      <option>111</option>
      <option ng-selected="aaa">222</option>
      <option>333</option>
      </select>
2. ng-change
  <input type="text" ng-change="bbb='Hello'"  ng-model="bbb">{{bbb}}
3 
<input type="text" value="dsasdsadasd" ng-copy="ccc='复制'" ng-paste="ccc='粘贴'" ng-cut="ccc='剪切'">{{ccc}}

ng-disabled 禁用状态指令案例：倒计时 $interval $timeout
服务 $interval cancel(timer)清除定时器

       var iNow = 5; 
        $scope.iT = true;
        var timer = $interval(function(){ 
          iNow --;
          $scope.text = iNow+'秒钟';
          if(iNow==0){ 

              $scope.text = '可以点击了';
              $scope.iT = false;
              $interval.cancel(timer);
          }
          
        },1000);
<input type="button" ng-value="text" ng-disabled="iT"/>

ng-readonly             也是禁用一些指令的。主要是针对表单等，显示效果和ng-disabled也有区别
ng-checked （选中状态）
ng-value   就不用{{ }} ,建议使用ng-value。对于用户体验很不好，angular没有完全加载完成的时候，页面会显示{{}}，不利于用户体验

用户体验
和上面的ng-value一样，为了增加用户体验，ng-bind;
ng-bind 设置隐藏内容，增加用户体验，<div ng-bind="name"></div>
小问题：如果有多个表达式{{name}},{{name}}如何使用ng-bind写：ng-bind-template=“{{name}},{{name}}”
ng-cloak 控制css，当这个标签还没解析时候，display是none,解析完成的时候变成block。因此也可以控制{{}}的显示
ng-bind-template 如果是多个表达式，就可以使用这个指令 ng-bind-template="{{text}},{{text}}"

ng-bind-html  把其中内部的标签去执行，但是angularJs主要是在数据交互方面，因此这些不常用的东西做成插件的机制，提供给用户调用。也是插件，也是模块,在['A---']引用

插件1：http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-sanitize.min.js [ngSantize]
ng-non-bindable  不去让表达式被解析，不常用。

样式都可以挂载到$scope下，也可以写在行内
ng-class 添加样式里面是一种对象的写法
ng-style  通过指令的方式写行间样式
ng-href   凡是加ng的都是比较有利于用户体验的，因为没有加载完成的时候是看不到东西。不加效果一样
ng-src
ng-attr-(suffix)   //提供一种通用的方式，有些是没有提供样式。其他的都可以
    ng-attr-href
    ng-attr-str

<style type="text/css"> 
     .red{ background: red;}
     .blue{ background: blue;} 
     .white{ color:#fff;}
</style>      <p ng-bind="name" ng-class="{red:true}"></p> 
       <p ng-bind-template="{{name}},{{name}}" ng-style="{color:'red'}"></p>
       <p ng-bind-html="text" ng-class="{{oclass}}"></p>
       <p ng-cloak ng-style="{{ostyle}}">{{name}}</p> <!--没有加载完的时候是display:none-->
       <a ng-href="http://www.baidu.com/" ng-bind="name" ng-attr-title="{{name}}"></a>

DOM
ng-show 显示针对的display (true/false)
ng-hide 隐藏
ng-if   和show的不同点是，直接对dom节点进行删除添加操作
ng-swtich 选择性的隐藏切换
   on               绑定的数据变量名
default         ng-switch-default 首先显示默认的效果    on的初始值会显示这个
when            切换的效果 ng-swicth-when="false";        绑定值切换后就显示这个
ng-open      <details ng-open="true"> html5中open一样

<input type="checkbox" ng-model="bbb" >
      <div ng-bind="name" ng-show="bbb"></div>
      <div ng-bind="age" ng-hide="bbb"></div> 
      <div ng-bind="nation" ng-if="bbb"></div> 

      <input type="checkbox" ng-model="ccc">
      <div  ng-switch on="ccc">
      <div ng-bind="name" ng-switch-default></div> 
      <div ng-switch-when="false" ng-bind="age"></div> 
   </div>
   <details ng-open="ccc">
         <summary>Copyright 2011.</summary>
         <p>pc上面只在谷歌跟saria上面实现了这个效果</p>
  </details>

ng-init 初始化数据 eg: ng-init=" text=hello" $scope.name='hello'的方式比较清晰

建议：一般初始化数据采用$scope下面挂载的方式，但是有些特殊的地方还是需要ng-init比如在ng-repeat的时候

ng-include 通过模板的方式引入文件或者东西.html 或者js

ng-model   扩展：比如不想实时的更新控制双向数据绑定的控制
  ng-model-options eg:ng-model-options="{updateOn: 'blur'}" 光标离开事件updateOn
ng-controller 控制器。扩展当controller开发比较复杂的项目的时候，支持面向对象的写法：
   as创建一个对象出来 ng-controller="fn as a1"

<div ng-repeat="outerD in datas" ng-init="outerIndex=$index">
     <p ng-repeat="innerD in outerD" ng-init="innerIndex=$index">
      <span>{{innerD}}--{{outerIndex}}{{innerIndex}}</span>
     </p>
   </div>
<div ng-include=" 'include.html' "></div>   //睁开你的狗眼看仔细了，这里可是双引号里面还加了单引号的

ng支持面向对象的写法：

var m1 = angular.module('myapp1',[]);
      m1.controller('Aaa',['$scope',Person]);
      function Person($scope){ }; // 构造函数  面向对象的写法
      Person.prototype.showName = function(){ 
         return 'angularjs';
      };
      Person.prototype.text = 'anikin';

<div ng-controller="Person as p1 " >
       {{ p1.showName() }},{{p1.text}}
</div>

0 0