javascript - 点击列表某一项，如何请求里面的详细数据并展现出来-PHP中文网问答

点击列表某一项，如何请求里面的详细数据并展现出来

我现在这里的APP列表是ng-repeat循环出来的，但是我想点击每个列表的时候弹出另一个页面，这个页面里面的数据是需要ajax请求出来的比如这样,angularjs应该怎么写呢？新手求助
贴上部分代码：
列表的json：

[
  {
    "name": "去哪儿",
    "imageUrl": "images/icon_qunaer.png",
    "intro": "这是一款很搞笑的游戏",
    "id":1,
    "salary":20.00,
    "remain":12,
    "category":"旅行",
    "download":"http://www.baidu.com"
  },
  {
    "name": "水滴",
    "imageUrl": "images/icon_water.png",
    "intro": "这是一款很搞笑的游戏",
    "id":2,
    "salary":10.00,
    "remain":2222,
    "category":"财务",
    "download":"http://www.baidu.com"
  }
]

点击后详细的弹出页：

[
  {
    "name": "去哪儿",
    "imageUrl": "images/icon_qunaer.png",
    "appSize": "112M",
    "id":1,
    "appRank":22,
    "remain":12,
    "appDawnDesc":"想要下载，必须先做十个俯卧撑",
    "keyWord":"旅行"
  }
]

HTML部分：


            

                

                    
                
            
            
                
{{list.name}}
                {{list.category}}剩余{{list.remain}}个

angularjs部分，写了一部分不知道怎么写了，求大神指条明路。就是不知道这么把数据传到点击之后的详细页面上：

$http.get('data/gameList.json').success(function(data){
            $scope.games = data;
            $scope.orderProp = "rank";
            $scope.openDeatil = function (list) {
                $(document).on("pageInit", function(e, pageId, $page) {
                    if(pageId == list.id) {

                    }
                });
                $timeout(function () {
                    $.router.load("/taskDeatil.html")
                },10);
            }
        });  
        //初入angularjs，还请轻喷，还用了淘宝的sui

<img ng-src="{{list.imageUrl}}"> {{list.name}} {{list.category}}剩余{{list.remain}}个 <button class="button button-round">{{'+'+list.salary+'元'}}</button>

$scope.openDetail = function(id){ $http.get('data/gameList.json?id='+id).success(function(data){ $scope.games = data; $scope.orderProp = "rank"; $timeout(function () { $.router.load("/taskDeatil.html") },10); }); }

全部回复(4)

PHPz2017-04-11 12:13:47 4楼

ng-click要放在每个要点击的层上,e.g.
html:

js:

赞 +0

添加回复

ringa_lee2017-04-11 12:13:47 3楼

给你个思路吧
1、循环输出的标签用href="#/personal/production?args=vars"进行跳转，附加参数就行了,这个参数可以在另一个页面提取出来
2、就像你用的ng-click，在点击事件中$location.path('/design/' + data.id);这个data.id可以是你遍历的每个列表的id
看你的需求，第二种方法非常适合

怪我咯2017-04-11 12:13:47 2楼

按照你现在的写法，在点击事件中把所选条目都传给controller。第二步用location.path进行页面跳转，跳转页面的时候已经把所点击的条目的id传给detail页面的controller。在detail controller接收到id之后（接收的方法ui-route 和ngRoute大概相同，自己查下angular路由就知道怎么用了），去请求数据，显示到页面就行了。

怪我咯2017-04-11 12:13:47 1楼

列表中的每一项有对应的id，出发点击事件的时候传入id参数，用$state.go 传递id这个参数,再在详情页面通过id请求详细的数据，显示出来就好了吧