AngularJS之API ——function

注:引入angular.js后直接在脚本里调用以下api

1.angular.bind(obj,fn,args);{概括:为标签对象手动绑定一个函数

obj:一般为name的标签对象。代码:var obj={name:"btn"};

fn:为obj对象要绑定的方法。代码:var fn=function(args){alert(args);}

args:为fn提供的参数,可以直接传入参数,也可以在调用此bind方法时传入参数

}

案例代码:

<script type="text/javascript">
var obj={name:"btn"};
var fn=function(args){
alert(args);
}
var bind=angular.bind(obj,fn,"123");
function aaakk(){
bind();
}
</script>

<input type="button" name="btn" value="123" οnclick="aaakk()">

2.angular.bootstrap(element,["moduleName"],args);{概括:手动angular的初始化,等于自动初始化ng-app="test"

element:标签对象,

moduleName:手动angular的初始化需要的一个module,

args:可以在调用此方法时传参数,也可以不传入

}

案例代码:

js:

{

var app=angular.module("test",[]);
app.controller("mycontr",function($scope){
$scope.hello="456";

});

以上部分代码与自动初始化时不变
angular.bootstrap(document,["test"]);
  

//可以调用此方法时为hello传入默认值

注:使用了此方法就可以代替在标签上写ng-app="test"

Html:

<div ng-controller="mycontr">
{{hello}}
</div>

}

3.angular.copy(source,destination){概括:一个可以复制对象的api

source:被复制的来源目标

destination:可选参数,如果没有,则返回一个拷贝对象,如果有,则将拷贝的对象赋给它

}

代码案例:

{

js:

function ExampleController($scope){//angularjs中的控制器简易写法

$scope.master= {};

    var test1;

    var test3=null;

    var test2 = "a";

    $scope.update = function(user) {

      $scope.master= angular.copy(user);//没有第二个参数返回copy对象

    };

    $scope.reset = function() {
       
angular.copy($scope.master, $scope.user);//有第二个参数直接给作用域中的user
    };

       }  

html:

<div ng-controller="ExampleController">

               <form novalidate class="simple-form">

            Name: <input type="text" ng-model="user.name" /><br />

            E-mail: <input type="email" ng-model="user.email" /><br />

            Gender: 

            <input type="radio" ng-model="user.gender" value="male" />

            male

            <input type="radio" ng-model="user.gender" value="female" />

            female

            <br />

            <button ng-click="reset()">RESET</button>

            <button ng-click="update(user)">SAVE</button>

        </form>

        <pre>form = {{user | json}}</pre>

        <pre>master = {{master | json}}</pre>

    </div>

}

4.angular.element(element);{概括:获取一个dom的方法

element:对象

}

代码案例:

{

js:

function ElementControl($scope){

var obj=angular.element("#pone");

$scope.gotos=function(){

console.log("123");

};
}

HTML:

<div  ng-controller="ElementControl">
    <div id="pone">12321132</div>
    <button  value="按下" ng-click="gotos()">button</button>
    </div>

}


5.angular.equals(o1,o2);{概括:比较两个对象、值或表达式是否相等

o1:对象1

o2:对象2

}

代码案例:

{

js:

{

<script type="text/javascript">
angular.module("test",[]);
function equalsController($scope){
$scope.name="angular.equals";
var masters={};
masters=angular.copy($scope.name);
$scope.masters=masters;
$scope.show=function(){
var da=angular.equals($scope.name,$scope.masters);
alert(da);
}
}
</script>

}

HTML:

{

<body ng-app="test">

<div ng-controller="equalsController">

   <p>{{ name}}</p>

   <p>{{masters}}</p>

   <button ng-click="show()">show</button>

   </div>

</body>

}

}


6.angular.extend(dst,src...);{概括:dst可以继承后面所有的所有

dst:容器对象
src:要被继承的目标对象,可以是多个

}

代码案例:{

js:{

$scope.extend=function(){

$scope.body={//body这个对象有一个cry方法

cry:function(){

alert("cry");

}

}

$scope.equData={};//在作用域中声明一个空对象

angular.extend($scope.equData,$scope.body);//可以多继承和单继承

$scope.equData.cry();//调用继承了的方法

}

}

html:{

<button ng-click="extend()">继承方法</button>

}

}


7.angular.foreach(list,fn);{概括:循环遍历数组或者集合

list:可以是数组或集合数据源

fn:函数,数组时的函数写法:fn(array[i],index,array)。集合时的函数写法:fn(value,key)

}

代码案例:{

js:{

$scope.foreach2=function(){

var list={name:'张三',age:'20',sex:'男'};

angular.forEach(list,function(val,key){

alert(key+","+val);

});

};

}

html:{

<p>遍历list键值对{name:'张三',age:'20',sex:'男'}</p>

   <buttonng-click="foreach2()">angular.foreach2</button>

}


}


8.angular.fromJson(jsonString);{概括:将传入的json字符串转为json对象

jsonString:json字符串

}

代码案例:{ 注:这里传入的json字符串格式必须是外面单引号,内部双引号,否则会出错

js:

$scope.fromjson=function(){

var json='{"name":"张三","age":"20","sex":"男"}';

var obj=angular.fromJson(json);

alert("姓名:"+obj.name+",年龄:"+obj.age+",性别:"+obj.sex);

}

html:

<p>json字符串转对象'{"name":"张三","age":"20","sex":"男"}'</p>

   <button ng-click="fromjson()">angular.fromJson</button>

}


9.angular.isArray(value);{概括:判断是否是数组

value:array数组

}

代码案例:{

js:

$scope.isArray=function(){

var array=["a","b","c"];

var da=angular.isArray(array);

alert(da);


};

html:

<div>数组["a","b","c"];</div>
<div><input type="button" ng-click="isArray()" value="angular.isArray"/></div>

}

10.angular.isDate(val);{概述:判断是否是日期

用法同isArray

}

11.angular.isDefined(val);{概述:判断是否为defined,否则为undefined

用法同isArray

}

12.angular.isElement(val){概述:判断是否是标签

用法同isArray

}

......省略以下同种方法


13.angular.lowercase(string);{概述:转小写

var sd="DASKDNadladlsa";

var djk=angular.lowercase(sd);

alert(djk);

}

14.angular.module(moduleName,[]){概括:允许我们定义自己的模块,这个模块具有被注入到其他模块中使用

moduleName:当前模块的名称

[]:这里可以是其他的模块命名,不为空之后就能使用被注入进来的模块中元素了。

代码:{

angular.module("app", [ "controls", "data"])

// controls.js (controls 模块依赖于data 模块)

angular.module("controls", [ "data" ])

// data.js (data 模块没有依赖项,数组为空)

angular.module("data", [])

}

}

15.angular.toJson(json,pretty){概括:json对象转字符串

json:json对象

pretty:控制输出的字符串格式

代码:{

		angular.toJson({name:'xxx'});
		//$ "{"name":"xxx"}"
		angular.toJson({name:'xxx'},true);
		//$ "{
		//$    "name": "xxx"
		//$ }"
		angular.toJson({name:'xxx'},10);
		//$ "{
		//$            "name": "xxx"
		//$ }"
	}

}


................下一章angular_directive指令.....

  1. 常见内置指令:  
  2.         ng-app      指定应用根元素,至少有一个元素指定了此属性。  
  3.         ng-controller   指定控制器  
  4.         ng-show     控制元素是否显示,true显示、false不显示  
  5.         ng-hide     控制元素是否隐藏,true隐藏、false不隐藏  
  6.         ng-if       控制元素是否“存在”,true存在、false不存在  
  7.         ng-src      增强图片路径  
  8.         ng-href     增强地址  
  9.         ng-class    控制类名  
  10.         ng-include      引入模板  
  11.         ng-disabled     表单禁用  
  12.         ng-readonly     表单只读  
  13.         ng-checked      单/复选框表单选中  
  14.         ng-selected     下拉框表单选中  
  15.         ng-init         初始化数据  


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值