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

发布于
2016-08-12

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

angularjs sui-mobile javascript

阅读 6.5k

4 个回答

peterfei

✓ 已被采纳

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