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

当前支付方式: {{ 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>
            
                 <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>

<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> 

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

{{ '2015-05-20T03:56:16.887Z' | date:"MM/dd/yyyy @ h:mma"}}

{{ 1432075948123 | date:"MM/dd/yyyy @ h:mma"}}

{{ 1432075948123 | date:"MM/dd/yyyy @ h:mma":"UTC"}}

{{ 12 | currency}} 
{{ 12.45 | currency:'￥'}}

{{ 12.45 | currency:'CHY￥':1}} 
{{ 12.55 | currency:undefined:0}}

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>

　　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>

</div>

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