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

Question

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

我现在这里的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部分：

<div class="row normal" ng-repeat="list in games" ng-click="openDeatil(list)" ng-cloak>
            <div class="col-20 taskIcon">
                <div class="logoCnt">
                    <img ng-src="{{list.imageUrl}}">
                </div>
            </div>
            <div class="col-50 desc">
                <p class="taskName textBlack size_08">{{list.name}}</p>
                <p class="taskDesc textGrey size_06"><span class="button button-round category">{{list.category}}</span>剩余<span>{{list.remain}}</span>个</p>
            </div>
            <div class="col-30 down_btn">
                <div>
                    <button class="button button-round">{{'+'+list.salary+'元'}}</button>
                </div>
            </div>
        </div>

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

Answer 1

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

<div class="row normal" ng-repeat="list in games" >
     <!--每个ng-click事件在显示单独的层上-->
         <div ng-click="openDeatil(list.id)">
            <div class="col-20 taskIcon">
                <div class="logoCnt">
                    <img ng-src="{{list.imageUrl}}">
                </div>
            </div>
            <div class="col-50 desc">
                <p class="taskName textBlack size_08">{{list.name}}</p>
                <p class="taskDesc textGrey size_06"><span class="button button-round category">{{list.category}}</span>剩余<span>{{list.remain}}</span>个</p>
            </div>
            <div class="col-30 down_btn">
                <div>
                    <button class="button button-round">{{'+'+list.salary+'元'}}</button>
                </div>
            </div>
            </div>
        </div>

js:

    $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);
        });  
    }

Answer 2

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

Answer 3

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

Answer 4

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