angularjs使用收录

1、angular的表单提交方式有所不同，$http服务代替ajax与后台交互，格式为：

$http({
    method: 'GET',
    url: '/someUrl'
}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码
});

其中get方式的传输数据可使用：params{id:''001,name:'hezhiyu'}、data:{$.params($scope.user)}、data:{'id':'123456','name':'zhangsan'}, 无需申明其他属性

post方式需要申明headers属性:

$http({
    method:'post',
    url:'addUser',
    data:$.param($scope.user),
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
})

其中，如需使用data:{"orderId":orderId}，这种方式传递，需要transformRequest来改变格式

transformRequest: function(obj) {
    var str = [];
    for (var s in obj) {
        str.push(encodeURIComponent(s) + "=" + encodeURIComponent(obj[s]));
    }
    return str.join("&");
}

提交文件配合表单提交的方式：

var form = new FormData($("#formId")[0]);
var file = document.querySelector('input[type=file]').files[0];
$http({
    method:'post',
    url:'updateOrder',
    data:form ,
    headers: {
        'Content-Type': undefined
    },
    transformRequest: angular.identity
})

2、循环指令配合过滤器的使用，ng-repeat="wehchart in orderList | filter:{mediaType:2} | filter:{mediaOrderStatus:4}"，取值：{{wehchart.orderNo}}，这种多级过滤的方式不建议使用，因为后台数据量过大的情况不利于性能

3、ng-if指令

<span ng-if="wehchart.status==='0'" style="color: red">已下单,未支付</span>
<span ng-if="wehchart.status==='1'" style="color:green">支付完成</span>

4、ng-click与href

ng-click="deleteBlogCart(allCart.cartId)"

href="getMediaOrder?orderId={{wehchart.orderId}}&mediaType={{wehchart.mediaType}}"