Angularjs学习笔记1_基本技巧

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;
   })
  }

 

 

 

转载于:https://www.cnblogs.com/dengzy/p/5348428.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值