无限真假
2017-02-13 03:55
采纳率: 0%
浏览 2.0k

angularJS提取表格中的内容并alert出来

JS代码:
var url = "https://testweixin.1jia2.cn/api/weixin/1jia2_online/script/weixin_order_list.php";
var app = angular.module("myApp", []);
app.controller("customersCtrl", function ($scope, $http) {
$http.get(url).success(function (data) {
// 通过
分隔
data = data.split("
");
// 要显示的数据
var length = data.length - 1;
var array = [];

    for (var i = 1; i < length; i++) {
        //                             result[1]            result[2]                     result[3]   result[4]   result[5]  result[6] result[7] result[8]
        //                             订单号    ---------------日期------------------    --商品--     --详情--     单价     个数    总价      详情
        var result = data[i].match(/(.{32})\s+(\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2})\s+([\d\D]*)\s+([\d\D]*)\s+(\d+)\s+(\d+)\s+(\d+)\s+([\d\D]+)/);
        for (var j = 1; j < result.length; j++) {

            // 用户的信息 特殊处理
            if (j == result.length - 1) {
                //无数据用户
                if (result[j].length < 6) {
                    result[j] = "";
                }
                else {
                    //有数据用户
                    result[j] = result[j].replace(/\\/g, "");
                    result[j] = result[j].substring(1, result[j].length - 3);
                    var obj = angular.fromJson(result[j]);
                    result[8] = obj;
                }
            }
        }
        array.push({
            'number': result[1],
            'time': result[2],
            'goods': result[3],
            'details': result[4],
            'price': result[5],
            'amount': result[6],
            'total': result[7],
            'person': result[8]

        });
    }
    $scope.customers = array;
});

});

HTML代码:
<!DOCTYPE html>






数据页面


序号 订单号 购买时间 购买商品 商品详情 单价 个数 总价 个人信息
{{ $index + 1 }} {{customer.number}} {{customer.time}} {{customer.goods}} {{customer.details}} {{customer.price}} {{customer.amount}} {{customer.total | number:2}} Name:{{customer.person.userName}}  Mobile:{{customer.person.userMobile}} 详情
总计 总数: 总价:


CSS代码:
*{
margin: 0;
padding: 0;
}

.all {
position: relative;

}

.logo {
width:165px;
height: 135px;
position: absolute;
background-image: url("logo.png");
left: 250px;
top:0px;
z-index: 1;
}

.msg {
position: absolute;
font-family: "微软雅黑";
font-size: 50px;
left:600px;
top: 30px;
}

.tab {
position: absolute;
border: 1px solid red;
background-color:#cccccc;
width: 100%;
height: 1000px;
top:120px;
z-index: 10;
}

#table {
border:1px solid #000;
position: absolute;
margin: 40px auto;
border-collapse:collapse;
width:95%;
left:60px;
top: 30px;
z-index: 2;
}

.tab td{
border:1px solid #000;
}

#number,#time,#id,#sum {
text-align: center;
}

#price,#amount,#total,#no,#money{
text-align: right;
}

.word {
font-family: "微软雅黑";
font-size: 18px;
color:blue;
text-align: center;
}

#tableTwo {

/*border:1px solid #000;*/
border-collapse: collapse;
width:100%;

}

就是我点击详情的时候,能够alert出来当前的个人信息。用angularJS做。急急急啊,大神们,求指导~~~~

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • 三致 2017-02-13 04:25

    利用angular的特性:双向绑定

    打赏 评论
  • 蚂蚁冲锋队 2017-02-13 05:31

    你的代码可能是粘贴的原因,显得有点乱,看的不是很清除。你的需求:从后端获得数据,并且通过弹出框显示出来?
    如果是这样我可以提供一个实现流程:
    1、$http.get()获得数据并保存到Controller的一个对象中 如:$scope.mArray={};
    2、使用$modal自定义弹出框,具体怎么实现可以上网找,同时需要用到bootstrap
    3、将$scope.mArray={}中的数据与自定义的$modal弹出框绑定,ng-bind=""
    这样基本就能满足你的需求了,希望对你在解决问题的思路上有帮助

    打赏 评论

相关推荐 更多相似问题