angularjs英文版api学习 （附demo）

http://blog.miniasp.com/post/2013/05/11/AngularJS-ng-module-select-ngOptions-usage-samples.aspx

http://blog.darkthread.net/post-2014-06-21-angular-notes-5.aspx

1.angular.bind

var self = {name: 'boy'};
var f = angular.bind(self, function (age) { alert(this.name + ' is ' + age + ' !')});
 f(12);

2、angular.bootstrap

  var app = angular.module('demo', [])
  .controller('WelcomeController', function($scope) {
      $scope.greeting = 'Welcome!';
  });
  angular.bootstrap(document, ['demo']);

3、angular.copy

使用angular.copy拷贝后会指向一个新地址

4、angular.element

angular.element(document.getElementById('ddd')).addClass('ccc')

5、angular.equal(pram1,pram2);

angular.equal("a","a");//true
console.log(angular.equals(true,1));  //false 不能进行强转化
var a={a:111};
var b={a:111};
console.log(angular.equals(a, b));    //true

6、angular.forEach（Arr，fn，[context]）

    //对象遍历
    var values = {name: 'misko', gender: 'male'};
    var log = [];
    angular.forEach(values, function(value, key) {
        log.push(key + ': ' + value);
    });
    console.log(log);
    //["name: misko", "gender: male"]

   var values = {name: 'misko', gender: 'male'};

var log = [];
   angular.forEach(values, function(value, key) {
        this.push(key + ': ' + value);
    }，log);
//["name: misko", "gender: male"]

    //数组遍历
    var values = [1,2,3];
    var log = [];
    angular.forEach(values, function(value, key) {
        log.push(key + ': ' + value);
    });
    console.log(log);

7、angular.fromJson

    var json = '{"name":"liSi", "password":"321"}';
    var jsonArr = '[{"name":"zhangSan", "password":"123"},{"name":"liSi", "password":"321"}]';
    var obj = angular.fromJson(json);
    console.log(obj);
    var objArr = angular.fromJson(jsonArr);
    console.log(objArr);

8、angular.identity

function getResult(fn, input) {
  return (fn || angular.identity)(input);
};
getResult(function(n) { return n * 2; }, 21);   // returns 42
getResult(null, 21);                            // returns 21
getResult(undefined, 21);                       // returns 21

Module

1、form

<script src="angular-1.3.0.js"></script>
<style>
        .my-form {
            transition:all linear 0.5s;
            background: transparent;
        }
        .my-form.ng-invalid {
            background: red;
        }
</style>
<script>
    angular.module('formExample', [])
        .controller('FormController', ['$scope', function($scope) {
            $scope.userType = 'guest';
        }]);
</script>

<form name="myForm" ng-controller="FormController" class="my-form">
    userType: <input name="input" ng-model="userType" required>
    <span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
    <code>userType = {{userType}}</code><br>
    <code>myForm.input.$valid = {{myForm.input.$valid}}</code><br>
    <code>myForm.input.$error = {{myForm.input.$error}}</code><br>
    <code>myForm.$valid = {{myForm.$valid}}</code><br>
    <code>myForm.$error.required = {{!!myForm.$error.required}}</code><br>
</form>

 

---恢复内容结束---

1.angular.bind

var self = {name: 'boy'};
var f = angular.bind(self, function (age) { alert(this.name + ' is ' + age + ' !')});
 f(12);

2、angular.bootstrap

  var app = angular.module('demo', [])
  .controller('WelcomeController', function($scope) {
      $scope.greeting = 'Welcome!';
  });
  angular.bootstrap(document, ['demo']);

3、angular.copy

使用angular.copy拷贝后会指向一个新地址

4、angular.element

angular.element(document.getElementById('ddd')).addClass('ccc')

5、angular.equal(pram1,pram2);

angular.equal("a","a");//true
console.log(angular.equals(true,1));  //false 不能进行强转化
var a={a:111};
var b={a:111};
console.log(angular.equals(a, b));    //true

6、angular.forEach（Arr，fn，[context]）

    //对象遍历
    var values = {name: 'misko', gender: 'male'};
    var log = [];
    angular.forEach(values, function(value, key) {
        log.push(key + ': ' + value);
    });
    console.log(log);
    //["name: misko", "gender: male"]

   var values = {name: 'misko', gender: 'male'};

var log = [];
   angular.forEach(values, function(value, key) {
        this.push(key + ': ' + value);
    }，log);
//["name: misko", "gender: male"]

    //数组遍历
    var values = [1,2,3];
    var log = [];
    angular.forEach(values, function(value, key) {
        log.push(key + ': ' + value);
    });
    console.log(log);

7、angular.fromJson

    var json = '{"name":"liSi", "password":"321"}';
    var jsonArr = '[{"name":"zhangSan", "password":"123"},{"name":"liSi", "password":"321"}]';
    var obj = angular.fromJson(json);
    console.log(obj);
    var objArr = angular.fromJson(jsonArr);
    console.log(objArr);

8、angular.identity

function getResult(fn, input) {
  return (fn || angular.identity)(input);
};
getResult(function(n) { return n * 2; }, 21);   // returns 42
getResult(null, 21);                            // returns 21
getResult(undefined, 21);                       // returns 21

directive

这里需要自己配置一下angular链接和ng-app才能执行

1.input type="checkbox"

<script type="text/javascript">
        angular.module('checkboxExample', [])
            .controller('ExampleController', ['$scope', function ($scope) {
                $scope.value1 = true;
                $scope.value2 = 'YES'
            }]);
</script>
<form name="myForm" ng-controller="ExampleController">
    Value1: <input type="checkbox" ng-model="value1"> <br />
    Value2: <input type="checkbox" ng-model="value2"
                   ng-true-value="'YES'" ng-false-value="'NO'"> <br />
    <tt>value1 = {{value1}}</tt><br />
    <tt>value2 = {{value2}}</tt><br />
</form>

input type="radio"

<form ng-controller="radioCtrl">
    <input type="radio" ng-model="value1" value="red">
    <input type="radio" ng-model="value1" ng-value="special">
    <input type="radio" ng-model="value1" value="blue">
    <tt>color = {{value1 | json}}</tt><br/>
</form>
<script>
    angular.module("radioExample",[]).controller("radioCtrl",function ($scope) {
        $scope.value1="blue"
        $scope.special={"value":"black","id":1111}
    })
</script>

input type="range"

<script>
    angular.module('rangeExample', [])
        .controller('ExampleController', ['$scope', function($scope) {
            $scope.value = 75;
            $scope.min = 10;
            $scope.max = 90;
        }]);
</script>
<form name="myForm" ng-controller="ExampleController">
    Model as range: <input type="range" name="range" ng-model="value" ng-min="min" ng-max="max">
    <hr>
    Model as number: <input type="number" ng-model="value"><br>
    Min: <input type="number" ng-model="min"><br>
    Max: <input type="number" ng-model="max"><br>
    value = <code>{{value}}</code><br/>
    myForm.range.$valid = <code>{{myForm.range.$valid}}</code><br/>
    myForm.range.$error = <code>{{myForm.range.$error}}</code>
</form>

ng-cut

<!--剪切的时候执行-->
<body ng-app="">

<input ng-cut="count = count + 1" ng-init="count=0" value="剪切这个文本" />

<p>文本被剪切了 {{count}} 次。</p>

<p>实例中计数变量 "count" 在每次剪切后自动增加 1。</p>

ng-if

<script >
    angular.module("ngIfModule",[]).controller("ngIfCtrl",function ($scope) {
        $scope.myValue=true;
    })
</script>
<div ng-controller="ngIfCtrl">
    <div ng-if="myValue" >22222</div>

    <!-- when $scope.myValue is falsy (element is visible) -->
    <div>3333</div>
</div>

ng-list

 

2.form

<form name="myform" ng-controller="myCtrl">
    <input name="myinput"  type="text" required ng-model="name" ng-change="ccc()">
    <span class="error" ng-show="myform.myinput.$error.required">Required!</span><br>
    <code>userType = {{name}}</code><br>
    <code>myForm.input.$valid = {{myform.myinput.$valid}}</code><br>
    <code>myForm.input.$error = {{myform.myinput.$error.required}}</code><br>
    <input name="username" ng-maxlength="10" ng-minlength="6" ng-model="greeting" required ng-pattern="/[a-zA-Z]/">
    <code>{{greeting.text}},AngularJS</code><br>
    <code>myForm.input.pattern = {{myform.pattern.$valid}}</code><br>
    <code>myForm.input.$valid = {{myform.username.$valid}}</code><br>
    <code>myform.username.$error.required = {{myform.username.$error.required}}</code><br>
    <code>myform.username.$error.minlength = {{myform.username.$error.minlength}}</code><br>
    <code>myform.username.$error.maxlength = {{myform.username.$error.maxlength}}</code><br>
    <code>myForm.$valid = {{myform.$valid}}</code><br>
    <code>myForm.$error.required = {{!!myform.$error.required}}</code><br>
</form>
<script>
    angular.module("myapp",[]).controller('myCtrl',function ($scope) {
        $scope.name="bbb";
        $scope.greeting="222"
        $scope.ccc=function (){
            $scope.name="ccc";
        }
    })
</script>

3、ng-init

    <script type="text/javascript">
        angular.module('initExample', [])
            .controller('ExampleController', ['$scope', function ($scope) {
                $scope.list = [['a', 'b'], ['c', 'd']];
            }]);
    </script>
<div ng-controller="ExampleController">
    <div ng-repeat="innerList in list" ng-init="outerIndex = $index">
        <div ng-repeat="value in innerList" ng-init="innerIndex = $index">
            <span class="example-init">list[ {{outerIndex}} ][ {{innerIndex}} ] = {{value}};</span>
        </div>
    </div>
</div>

 

ng-cut

<!--剪切的时候执行-->
<body ng-app="">

<input ng-cut="count = count + 1" ng-init="count=0" value="剪切这个文本" />

<p>文本被剪切了 {{count}} 次。</p>

<p>实例中计数变量 "count" 在每次剪切后自动增加 1。</p>

ng-if

<script >
    angular.module("ngIfModule",[]).controller("ngIfCtrl",function ($scope) {
        $scope.myValue=true;
    })
</script>
<div ng-controller="ngIfCtrl">
    <div ng-if="myValue" >22222</div>

    <!-- when $scope.myValue is falsy (element is visible) -->
    <div>3333</div>
</div>

ng-list

<script>
    angular.module("ngListModule",[]).controller("ngListCtrl",function ($scope) {
        $scope.list=[111,333,455]
    })
</script>
<div ng-controller="ngListCtrl">
<input type="text" ng-model="list" ng-list=" | "/>
    <div>{{list}}</div>
</div>

ng-option

<script>
    angular.module("ngOptionModule",[]).controller("ngOptionCtrl",function ($scope) {
        $scope.colors = [
            {name:'black', shade:'dark'},
            {name:'white', shade:'light', notAnOption: true},
            {name:'red', shade:'dark'},
            {name:'blue', shade:'dark', notAnOption: true},
            {name:'yellow', shade:'light', notAnOption: false}
        ];
        $scope.myColor = $scope.colors[2]; // red
    })
</script>
<div ng-controller="ngOptionCtrl">
    <ul>
        <li ng-repeat="color in colors">
            <span>Name:<input type="text" ng-model="color.name"/>
            <input type="checkbox" ng-model="color.notAnOption"/>
            <button ng-click="colors.splice($index,1)">X</button>
            </span>
        </li>
        <li><button ng-click="colors.push({})">add</button></li>
    </ul>
<hr/>
    <div>Color (null not allowed): <select  ng-options="color.name for color in colors" ng-model="myColor"></select></div>
    <div>Color (null not allowed): <select  ng-options="color.name for color in colors" ng-model="myColor">
        <option value="">请选择</option>
    </select>
    </div>
    <div>color.name group by color.shade : <select  ng-options="color.name group by color.shade for color in colors" ng-model="myColor">
    </select>
    </div>
    <div>color.name group by color.shade : <select  ng-options="color.name group by color.shade disable when color.notAnOption for color in colors" ng-model="myColor">
    </select>
    </div>
    Select <button ng-click="myColor = { name:'not in list', shade: 'other' }">bogus</button>.
    <hr/>
    Currently selected: {{ {selected_color:myColor} }}
    <div style="border:solid 1px black; height:20px"
         ng-style="{'background-color':myColor.name}">
    </div>
</div>

ng-bind-template

<script>
    angular.module('bindExample', [])
        .controller('ExampleController', ['$scope', function($scope) {
            $scope.salutation = 'Hello';
            $scope.name = 'World';
        }]);
</script>
<div ng-controller="ExampleController">
    <label>Salutation: <input type="text" ng-model="salutation"></label><br>
    <label>Name: <input type="text" ng-model="name"></label><br>
    <pre ng-bind-template="{{salutation}} {{name}}!"></pre>
</div>

ng-check

    <script type="text/javascript">
        var dem = angular.module("dim", []);
        dem.controller("dimcon", ["$scope", function ($scope) {
            $scope.master = true;
        }]);
    </script>
</head>
<body ng-controller="dimcon">
Check me to check both: <input type="checkbox" ng-model="master"><br />
<input id="checkSlave" type="checkbox" ng-checked="master">

ng-class

    <style type="text/css">
        .strike {
            text-decoration: line-through;
        }
        .bold {
            font-weight: bold;
        }
        .red {
            color: red;
        }
    </style>
<div ng-class="{strike:bbb,bold:ccc}">1111</div>
<input ng-model="bbb" type="checkbox">
<input ng-model="ccc" type="checkbox">
<div ng-class="style">222</div>
<input ng-model="style" type="text">
<div ng-class="[style1,style2,style3]">333</div>
<input ng-model="style1" type="text">
<input ng-model="style2" type="text">
<input ng-model="style3" type="text">

 

ng-class-odd ng-class-even

    <style>
        .odd{
            color:blue;
        }
        .even{
            color:red
        }
    </style>

<script>
    angular.module("ngClassModule",[]).controller("ngClassCtrl",function ($scope) {
        $scope.names=[1,2,3,4];
    })
</script>
<div ng-controller="ngClassCtrl">
    <ul>
        <li ng-repeat="name in names" ng-class-odd="'odd'" ng-class-even="'even'">{{name}}</li>
    </ul>
</div>

ng-paste

    <input ng-paste="paste=true" ng-init="paste=false" placeholder='paste here'>
    pasted: {{paste}}