Javascript 在点击事件时显示 for 循环中点击的项目

Question

有人可以在这里帮助我吗？我从 wordpress api(get_posts) 获取帖子列表。收到帖子后，我会将它们显示在 <a> 列表中标签。在每个 <a>标签有帖子项目的标题和描述。所有这些都是在 ionic 框架内用 javascript 动态完成的。

我的问题来了。显示帖子列表后，我需要单击列表中的单个帖子项目，然后该项目需要向我显示更多详细信息(即摘录)。然而，我只是成功地显示了每一篇帖子的详细信息，而不仅仅是所选帖子的详细信息。我正在模态中显示摘录。

我的代码如下。

Javascript //call JSON API upon page enter //gets list of posts and populates them in tags // tags have have title and description added

    .controller('chickenCtrl', function($scope, $stateParams, $window, $http, $state, $ionicModal, $ionicLoading) {

  $scope.$on('$ionicView.enter', function(){


      $scope.result = "";
      $scope.categories = "";
      $http.get('http://dhameergovind.co.za/wp/api/get_posts/')

        .success(function(data, status, headers,config){
        var i;
        var j;
        for (i = 0; i < data.posts.length; i++) { 
            console.log(data.posts[i]);
            var image = data.posts[i].thumbnail;
            var post_id = data.posts[i].id;
            console.log(post_id);
                for (j = 0; j < data.posts[i].categories.length; j++){
                    if (data.posts[i].categories[j].title=="Chicken"){

                    var chickenTitleObj = data.posts[i].title;
                    var chickenDescObj = data.posts[i].content;
                    document.getElementById('chick').innerHTML += '<a class="item item-thumbnail-left item-block" + id='+i+'>' + '<img src ="' + image + '"/>' + '<div class="middleText">' + '<h3 class="text-wrap">' + chickenTitleObj + '</h3>' + '<p class="text-wrap">' + chickenDescObj + '</p>' + '</div>' + '</a>' + '<br/>';


                    }
                    else{
                    alert("not existing")   

                    }
            }
        }
          $scope.result = data; // for UI
        })
        .error(function(data, status, headers,config){
          console.log('data error');
          $ionicLoading.hide();
        })
        .then(function(result){
          things = result.data;
          $ionicLoading.hide();
        });


  });

//once a post is clicked a modal opens to display details(Excerpt) of selected post

  $ionicModal.fromTemplateUrl('templates/recipeModal.html', { scope: $scope }).then(function(modal) { $scope.modal = modal; })


$scope.$on('modal.shown', function(e) {
      $ionicLoading.show({
        content: 'Loading',
        animation: 'ripple',
        showBackdrop: true,
        maxWidth: 200,
        showDelay: 0
      });

      $scope.result = "";
      $scope.categories = "";
      $http.get('http://dhameergovind.co.za/wp/api/get_posts/')

        .success(function(data, status, headers,config){
        var i;
        for (i = 0; i < data.posts.length; i++) { 
            console.log(data.posts[i]);
            var image = data.posts[i].thumbnail;
            var post_id = data.posts[i].id;

            console.log(post_id);
            var chickenTitleObj = data.posts[i].title;
            var chickenDescExerptObj = data.posts[i].excerpt;
            document.getElementById('chickDesc').innerHTML += '<a class="item item-thumbnail-left item-block">' + '<img src ="' + image + '"/>' + '<div class="middleText">' + '<h3 class="text-wrap">' + chickenTitleObj + '</h3>' + '<p class="text-wrap">' + chickenDescExerptObj + '</p>' + '</div>' + '</a>' + '<br/>';
            $ionicLoading.hide();               

        }
          $scope.result = data; // for UI
        })

        .error(function(data, status, headers,config){
          console.log('data error');
          $ionicLoading.hide();
        })

        .then(function(result){
          things = result.data;
          $ionicLoading.hide();
        });

});

})

//HTML

<ion-view view-title="Chicken Recipes">
  <ion-content>
    <div class="list">

        <div id="chick" class="input-box" ng-click="modal.show()">

        </div>

    </div>

  </ion-content>
</ion-view>

//Modal HTML

      <ion-modal-view view-title="Chicken Recipes">
        <ion-content class="padding">
          <div class="list">
            <div id="chickDesc" class="item-block input-box">

            </div>

          </div>
          <button class="button button-block button-positive" ng-click="modal.hide()">Close</button>
        </ion-content>

      </ion-modal-view> 

Answer 1

您的 ng-click 位于整个结果列表中，因此您无法知道单击了什么。您需要它位于重复元素之一上，并且需要某种方法来知道单击了哪个元素，如下所示:

document.getElementById('chickDesc').innerHTML += '<a ng-click="item_clicked(' + i.toString() + ');" class= ...

在 Controller 中定义item_clicked，如下所示:

$scope.item_clicked = function(index) {
    $scope.clicked_index = index;
    $scope.modal.show();
};

现在，在显示的模态中，删除 for 循环并保留其主体，替换为 $scope.clicked_index 而不是每次使用 i。

此外，您不应再次调用 $http.get('http://dhameergovind.co.za/wp/api/get_posts/')。它效率低下，并且还可能导致您看到错误的数据，以防添加新帖子并且索引不匹配。相反，在输入时在成功函数中第一次获取数据时保存数据。像这样的事情:

$scope.posts = data

(可选)，并且更高级一点，您可以创建一个像 http://dhameergovind.co.za/wp/api/get_posts/{post_id} 这样的端点来仅获取一篇帖子。这将确保您拥有所选帖子的最新数据。

正如上面的评论所说，你确实没有使用 Angular 的最大功能。使用 Angular，您不需要使用 Javascript 来构建页面的结构。在 Javascript 代码中写入 HTML 字符串表明您做错了。即使操作 DOM 也可能不是最好的方法。使用 Angular，您的 Javascript 代码应该只检索、发送和操作数据，并且您的模板应该描述如何将其映射到文档结构。

但我的答案是您可以对代码进行的最小更改，使其执行您想要的操作。