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

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的特性:双向绑定

    评论

报告相同问题?

悬赏问题

  • ¥15 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题:最近需要用CAT工具Trados进行一些开发
  • ¥15 南大pa1 小游戏没有界面,并且报了如下错误,尝试过换显卡驱动,但是好像不行
  • ¥15 没有证书,nginx怎么反向代理到只能接受https的公网网站
  • ¥50 成都蓉城足球俱乐部小程序抢票
  • ¥15 yolov7训练自己的数据集
  • ¥15 esp8266与51单片机连接问题(标签-单片机|关键词-串口)(相关搜索:51单片机|单片机|测试代码)
  • ¥15 电力市场出清matlab yalmip kkt 双层优化问题
  • ¥30 ros小车路径规划实现不了,如何解决?(操作系统-ubuntu)