AngularJS开发中常用的写法,如:获取URL参数、路由跳转、$http、获取元素等

分类:Javascript| 发布:佚名| 查看: | 发表时间:2014/11/23

控制器,带状态

app.controller('editCtrl', ['$http', '$location', '$rootScope', '$scope', '$state', '$stateParams', function($http, $location, $rootScope, $scope, $state, $stateParams){
// 上边声明添加显示的依赖注入,是为了防止,压缩(如UglifyJS)时改变function里的参数名,造成功能引用失败。推荐r.js压缩
    // do something...
}

获取路由的参数

$stateParams.id // #/camnpr/editCtrl?id=1

跳转路由状态

$state.go('camnpr.appManager'); // 跳转后的URL: #/camnpr/appManager 
$location.path('camnpr/appManager'); // 功能也是跳转的

ui-router扩展的跳转方式

<a ui-sref="camnpr.appManager">跳转</a> // 需要angular-ui-router


ng-repeat里显示序号: $index // 这个是从0计数的。

get请求

$http({
    method: 'get',
    url: 'http://camnpr.com/getAPI/',
    params:{id: 1},
    headers: {'x-camnpr-uid': '1000'}//可以加入任意的头信息
});

post请求

$http({
    method: 'post',
    url: 'http://camnpr.com/postAPI/',
    data:'id=1&referrer=camnpr.com', // 这里是字符串,格式请注意,同时我们可以使用 $.param({id:1, referrer: 'camnpr.com'})来获取等价的形式。
    // Form Data获取方式 Request.Form['id'] 。
    //这是加'Content-Type': 'application/x-www-form-urlencoded',的功劳。
    // 若不加'Content-Type',则:Request Payload:id=1&referrer=camnpr.com
    // data: {id: 1, referrer: 'camnpr.com'}, // 是对象,那么 Form Data的数据是:{"id":1,"referrer":"camnpr.com"}:
    headers: {'Content-Type': 'application/x-www-form-urlencoded', 'x-camnpr-uid': '1000'}
});


==================================================================

根据selector获取元素

angular.element('.is_select') // [<input type="checkbox" value="1" class="is_select">]

循环获取并操作

angular.forEach(document.getElementsByClassName('is_select'), function(item, index){
    if(item.checked){
        ids+=item.value+',';
    }
});

ng-click里带当前的a,button等的事件

<button ng-click="camnpr.submitAdd($event)" class="btn btn-primary ladda-button" data-style="zoom-in"><span class="ladda-label">提交</span></button> // $event.target.currentTarget

==================================================================

Angular 的表单属性 $valid, $invalid, $pristine, $dirty

属性类 描述
$valid ng-valid Boolean 告诉我们这一项当前基于你设定的规则是否验证通过
$invalid ng-invalid Boolean 告诉我们这一项当前基于你设定的规则是否验证未通过
$pristine ng-pristine Boolean 如果表单或者输入框没有使用则为True
$dirty ng-dirty Boolean 如果表单或者输入框有使用到则为True
Angular 也提供了有关表单及其输入框的类,以便你能够依据每一个状态设置其样式.

<form class="form-horizontal formvalidler" ng-submit="ad.submitAd()" role="form" novalidate="novalidate">    <input type="url" class="form-control" required="required" ng-model="camnpr.url" /> 
只用这个文本框发生修改了,下边的“提交”按钮才可以点击。此功能可以视为优化而已。@郑州网建
<button ng-disabled="form.$pristine" type="submit"  id="submitBtn" class="btn btn-primary ladda-button" data-style="zoom-in"><span class="ladda-label">提交</span></button>
</form>

工作中常用到的,未完待续...

365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/javascript/1768.html