Angularjs学习笔记1

Posted 2020-07-03 上善若水

10.AngularJS ng-click

  <button ng-click="clickCounter = clickCounter + 1">Click Me!</button>

 

　 <button ng-click="pressMe()"/>    在$scope域中定义的自己的pressMe方法


　 <button ng-click="printf(person)"/>  ng-click方法传递一个对象

9.AngularJS ion-radio,ion-checkbox ,ion-toggle 

       <div class="list card">
            <div class="item item-divider"> 

                当前支付方式: {{ data.pay }} </div>
                <ion-radio ng-repeat="item in payList"    ng-value="item.value" ng-model="data.pay" ng-change="payChange(item)" name="pay">   {{ item.text }} </ion-radio>
                <!--选中颜色      绑定json列表数据的text和checked-->   
                 <ion-checkbox class="checkbox-dark" ng-repeat="item in devList" ng-model="item.checked" ng-checked="item.checked"> {{ item.text }}: {{item. checked }} </ion-checkbox>    
                 <ion-toggle ng-repeat="item in devList" ng-model="item.checked" ng-checked="item.checked"> {{ item.text }} </ion-toggle>
        </div>                     

      <!--绑定json对象数据的checked    数据改变事件--> 
         <ion-checkbox ng-model="pushNotification.checked" ng-change="pushNotificationChange()">        Push Notifications  </ion-checkbox>    
        <ion-toggle ng-model="pushNotification.checked" ng-change="pushNotificationChange()">          Push Notifications    </ion-toggle>    
       <!--绑定-->   
      <ion-checkbox ng-model="emailNotification" ng-true-value="Subscribed" ng-false-value="Unubscribed">  Newsletter   </ion-checkbox>
       <ion-toggle ng-model="emailNotification" ng-true-value="Subscribed" ng-false-value="Unubscribed" toggle-class="toggle-assertive" >   Newsletter </ion-toggle>  

          $scope.devList = [
                { text: "html5", checked: true},
                { text: "CSS3", checked: false},
                { text: "javascript", checked: false}
          ];

8.AngularJS ng-options

   <div class="item item-divider">   select: {{ data.pay }}     
    <select ng-model="data.pay" ng-options="pay.value as pay.text for pay in payList" ng-change="payChange1(data)"></select>    
   </div>

   <div class="item item-divider">  mycity: {{ mycity }}          
       <select ng-model="mycity" ng-options="city.value as city.name for city in Cities"></select>                            
       <select ng-model="mycity.value" ng-options="city.value as city.name group by city.group for city in Cities" ng-change="cityChange(mycity)"></select>       
    </div>  

    $scope.mycity = { id: 1, name: ‘北京‘,value: ‘beijng‘, group: ‘中国‘ };
    $scope.Cities = [{ id: 1, name: ‘北京‘,value: ‘beijng‘, group: ‘中国‘ }, { id: 2, name: ‘上海‘,value: ‘shanghai‘, group: ‘中国‘ },

　　　　　　　　　　 　　{ id: 3, name: ‘广州‘,value: ‘guangzhou‘, group: ‘中国‘ }]; 

 $scope.payList = [{ text: "albaba alipay", value: "alipay" },{ text: "ebay paypal", value: "paypal" }];
 $scope.data = {pay: ‘alipay‘};
 $scope.pay1 = { text: "albaba alipay", value: "alipay" };         
 $scope.payChange1 = function(pay) {
    console.log("pay:", pay);
 };

 $scope.payChange = function(item) {
    console.log("pay:", item.pay);
 };
 $scope.cityChange = function(item) {
    console.log("item", item);
 };

7.Angular  css类和样式之 ng-class 和 ng-style标签

需要一个表达式。表达式执行的结果可能是下列之一：
  一个字符串，表示空间隔开的类名。
  一个类名数组
  一个类名到布尔值的映射
通过 {{}} 解析来进行数据绑定，从而能够动态地设置类和样式。http://www.jb51.net/article/70095.htm
<span ng-style="myColor">your color</span>
$scope.myColor={color:‘blue‘};
$scope.myColor={cursor: ‘pointer‘,color:‘blue‘};

    <!-- 动态样式-->

    <style type="text/css">

      .menu-disabled-true{

        opacity:1;

        color: red;

        -webkit-transition:all 1000ms linear;

        -moz-transition:all 1000ms linear;

        -o-transition:all 1000ms linear;

      }

      .menu-disabled-false{

        opacity: 0;

        -webkit-transition:all 1000ms linear;

        -moz-transition:all 1000ms linear;

        -o-transition:all 1000ms linear;

      }

    </style>

    <div class="menu-disabled-{{isDisabled}}">adfadfadasda</div>

    <button ng-click="test()">隐藏</button>

    <button ng-click="test1()">显示</button>

    <button ng-click="test11()">切换</button>
        $scope.isDisabled = true;
        $scope.test = function () {
          $scope.isDisabled = ‘false‘;
        };
        $scope.test1 = function () {
          $scope.isDisabled = ‘true‘;
        };
        $scope.test11 = function () {
          $scope.isDisabled = !$scope.isDisabled;
        };

  <!-- 类名和布尔映射 -->
    <style type="text/css">
   　　 .error {    background-color: red;    }
   　　 .warning {   background-color: yellow;    }
    </style>
    <div ng-class=‘{error:isError, warning:isWarning}‘>{{messageText}}</div>
    <button ng-click="showError()">error</button>
    <button ng-click="showWarning()">warning</button>

       $scope.isError = false;

       $scope.isWarning = false;

       $scope.messageText = ‘default, default‘;

       $scope.showError = function () {

          $scope.messageText = ‘This is an error‘;

          $scope.isError = true;

          $scope.isWarning = false;

       };

       $scope.showWarning = function () {

          $scope.messageText = ‘Just a warning, donot warry‘;

          $scope.isWarning = true;

          $scope.isError = false;

      };

<!-- 选中行 -->
  选中的行:设置 ng-class 的值为 {selected:$index==selectedRow}，当模型调用selectedRow 时将匹配 ng-repeat 的 $index，进而显示选中的样式。同样我们设置 ng-click 来通知控制器用户点了哪一行

　　<style type="text/css">
      .selected{
        background-color: lightgreen;
      }
    </style>
    <div ng-repeat="item in items" ng-class=‘{selected:$index==selectedRow}‘ ng-click=‘selectedWhich($index)‘>
      <span>{{item.product_name}}</span>
      <span>{{item.price | currency}}</span>
    </div>
    $scope.items = [{ product_name: "Product 1", price: 50 },{ product_name: "Product 2", price: 20 }, { product_name: "Product 3", price: 180 } ];
    $scope.selectedWhich = function (row) {
      $scope.selectedRow = row;
    }

6.AngularJS  {{ expression }}， ng-bind 和 输出 及 fiter

  表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量，表达式执行进行常用运算及输出。
  表达式可以写在 HTML 中，支持过滤器 ， 不支持条件判断，循环及异常
   如 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
   数字运算和字符串运算及输出

　　  <div ng-app="" ng-init="quantity=1;cost=5">
            <p>总价： {{ quantity * cost }}</p>
            <p>总价： <span ng-bind="quantity * cost"></span></p>
     </div>
    <div ng-app="" ng-init="firstName=‘John‘;lastName=‘Doe‘">
        <p>姓名： {{ firstName + " " + lastName }}</p>
        <p>姓名： <span ng-bind="firstName + ‘ ‘ + lastName"></span></p>
    </div>

　　 对象和数组输出
    <div ng-app="" ng-init="person={firstName:‘John‘,lastName:‘Doe‘}">
        <p>姓为 {{ person.lastName }}</p>
        <p>姓为 <span ng-bind="person.lastName"></span></p>
    </div>
    <div ng-app="" ng-init="points=[1,15,19,2,40]">
        <p>第三个值为 {{ points[2] }}</p>
        <p>第三个值为 <span ng-bind="points[2]"></span></p>
    </div>

  fiter

   <pre ng-bind="devList | json"></pre>    <!--查看json对象-->

　　<span>{{1288323623006 | date:‘yyyy-MM-dd HH:mm:ss Z‘}}</span>

<!--使用ISO标准日期格式 -->
{{ ‘2015-05-20T03:56:16.887Z‘ | date:"MM/dd/yyyy @ h:mma"}}
<!--使用13位（单位：毫秒）时间戳 -->
{{ 1432075948123 | date:"MM/dd/yyyy @ h:mma"}}
<!--指定timezone为UTC -->
{{ 1432075948123 | date:"MM/dd/yyyy @ h:mma":"UTC"}}

{{ 12 | currency}}  <!--将12格式化为货币，默认单位符号为 ‘$‘, 小数默认2位-->
{{ 12.45 | currency:‘￥‘}} <!--将12.45格式化为货币，使用自定义单位符号为 ‘￥‘, 小数默认2位-->

{{ 12.45 | currency:‘CHY￥‘:1}} <!--将12.45格式化为货币，使用自定义单位符号为 ‘CHY￥‘, 小数指定1位, 会执行四舍五入操作 -->
{{ 12.55 | currency:undefined:0}} <!--将12.55格式化为货币， 不改变单位符号， 小数部分将四舍五入 -->

5.AngularJS ng-hide/ng-show/ng-disabled/ng-if/ng-switch on

　　<input type="checkbox" ng-model="mySwitch">
　　<button ng-disabled="mySwitch">点我!</button>
　　直接赋值和使用表达式
　　<p ng-show="hour > 12">我是可见的。</p>     
　　<p ng-show="false">我是不可见的。</p>
　　<i class="icon ion-person" ng-show="($index % 2)== 0"></i>               
　　<i class="icon ion-checkmark" ng-hide="useSign.status == ‘2‘"></i>

　<element ng-if="expression"></element>

　  　ng-if 如果表达式返回 false 则从 DOM 中会移除整个元素，如果为 true，则会添加元素。 ng-hide 隐藏元素

<input type="checkbox" ng-model="myVar" ng-init="myVar = true">  
<div ng-if="myVar"><h1>Welcome</h1></div>

 

<li ng-repeat="person in persons">

<span ng-switch on="person.sex">

　　<span ng-switch-when="1">you are a boy</span>

　　<span ng-switch-when="2">you are a girl</span>

　　</span>

<span ng-if="person.sex==1">you may be a father</span>

<span ng-show="person.sex==2">you may be a mother</span>

<span>please input your baby‘s name:<input type="text" ng-disabled="!person.hasBaby"/></span>

4.angular.foreach

  var objs =[{a:1},{a:2}];
  angular.forEach(objs, function(data,index,array){
     //data等价于array[index]
      console.log(data.a+‘=‘+array[index].a);
  });

 参数如下：

  objs：需要遍历的集合

  data:遍历时当前的数据

  index:遍历时当前索引

  array:需要遍历的集合，每次遍历时都会把objs原样的传一次。

 也可写成

 var objs =[{a:1},{a:2}];
   angular.forEach(objs, function(data){
   console.log(data.a);
 });

3.angular.element

 angular.element(document.getElementById(‘username‘)).scope()

 1.angular.element（）.

　　http://www.jb51.net/article/59544.htm

 2.document.getElementById

getElementById        获取对 ID 标签属性为指定值的第一个对象的引用
getElementsByName       根据 NAME 标签属性的值获取对象的集合
getElementsByTagName     获取基于指定元素名称的对象集合

 3.document.querySelector(CSS selectors)

document.querySelector("p");       获取文档中第一个 <p> 元素：
document.querySelector(".example");   获取文档中 class="example" 的第一个元素:
document.querySelector("p.example");  获取文档中 class="example" 的第一个 <p> 元素:
document.querySelector("a[target]");  获取文档中有 "target" 属性的第一个 <a> 元素：

2.AngularJS init、repeat  

    ng-init初始化变量,对象,数组，ng-bind及{{}}     

　　  <div class=‘item‘  ng-init=" name=‘aurora‘;age=‘18‘ "> 

         　　<p ng-bind=" name+‘,‘+age "></p>          <p>{{ name+‘,‘+age }}</p>          <p ng-bind="name"></p>          <p ng-bind="age"></p>

        </div>

        <div class=‘item‘ ng-init="hero={name:‘aurora‘,role:‘sup‘,line:‘刮风}">

　　        <p ng-bind="hero.name+‘,‘+hero.role+‘,‘+hero.line"></p>          <p ng-bind="hero.name"></p>  <p ng-bind="hero.role"></p>  <p ng-bind="hero.line"></p>

        </div>

        <div class=‘item‘ ng-init="heros=[‘女神‘,‘天使‘,‘魂锁‘]">

          <p ng-bind="heros[0]+‘,‘+heros[1]+‘,‘+heros[2]"></p>          <p ng-bind="heros[0]"></p>          <p ng-bind="heros[1]"></p>          <p ng-bind="heros[2]"></p>

        </div>     

    ng-repeat遍历 $index

       遍历集合    
            <li ng-repeat="x in names">                             无重复集合    
            <li ng-repeat="x in number track by $index">  重复集合 

       遍历对象 

            <ul ng-repeat="obj in objs ">
           　　 <li ng-repeat="(key,value) in object track by $index"> {{key+":"+value}}</li>       
          　　  <li ng-repeat="(key,value) in obj "> {{key+":"+value}}  </li>  按原有顺序
            </ul>
            <tr ng-repeat="(key, value) in objs ">
            　　<td><span ng-bind="$index"></span></td>
           　　 <td><span ng-bind="key"></span>:<span ng-bind="value"></span></td>
         　　  <td><span ng-bind="$odd"></span></td>
         　　   <td><span ng-bind="$even"></span></td>
         　　   <td><span ng-bind="$first"></span></td>
         　　   <td><span ng-bind="$last"></span></td>
         　　   <td><span ng-bind="$middle"></span></td>
          </tr>       
          <div ng-repeat-start="(key,value) in objs">
            　　<p><span ng-bind="$index"></span></p>
           　　 <p><span ng-bind="key"></span>:<span ng-bind="value"></span></p>
          </div>
          <div ng-repeat-end></div>      

1.angularJS  link $attrs 和 $element

 link: function (scope, element, iAttrs) {

   console.log( iAttrs.$$element[0]);  //

   console.log( iAttrs.$attr);      //当前指令对象的属性集合

   console.log( iAttrs.$attr.type + " " + iAttrs.$attr.animation); //读取属性

　　//循环

　　for(var i=0; i<attrs.repeater - 1; i++) {    //     } 

//设置

   attrs.$set(‘b‘, ‘ooo‘);//给属性设置b，值为ooo，

   attrs.$$element[0].disabled = true;

   //当前指令对象element,它就相当于jQuery对象，以下

　　 console.log( element);

   element.bind(‘click‘, function () {          

       scope.$apply(function () {
         scope.content = ‘这是点击后的显示的内容‘;
    　　　　})
    });  

   var button2 =angular.element(document.getElementById("btn2")) //

   button2.bind(‘click‘, function () { });       

   var button1 = jQuery(element).find(‘button‘).first();            
   button1.bind(‘click‘, function () { // scope.$apply(function () { scope.message = ‘这是点击按钮后的值‘;  });
  　　 button1[0].disabled = true;
   })
  }