Javascript 在单击事件时显示来自 for 循环的单击项目

Question

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

我的问题来了。显示帖子列表后，我需要单击列表中的单个帖子项目，然后需要从中显示更多详细信息（即摘录）。但是，我只成功地显示了每个帖子的详细信息，而不仅仅是选定的帖子。我正在模态中显示摘录。

我的代码如下。

Javascript //在页面输入时调用 JSON API //获取帖子列表并将它们填充到标签中 //标签已添加标题和描述

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


  });

//一旦点击帖子，就会打开一个模式以显示所选帖子的详细信息（摘录）

  $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>

//模态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= ...

像这样在你的控制器中定义item_clicked：

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

现在在您的 on-modal-shown 中，删除 for 循环并保留其主体，替换为 $scope.clicked_index 而不是每次使用 i。

另外，您不应再次致电$http.get('http://dhameergovind.co.za/wp/api/get_posts/')。它效率低下，并且还可能导致您看到错误的数据，以防添加了新帖子并且索引不匹配。取而代之的是，当您第一次在 on-enter 的成功功能中获取数据时保存数据。像这样的：

$scope.posts = data

或者，更高级一点，您可以创建一个类似http://dhameergovind.co.za/wp/api/get_posts/{post_id} 的端点来获取一个帖子。这样可以确保您拥有所选帖子的最新数据。

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

但我的回答是您可以对代码进行的最小更改，以使其按照您的意愿行事。

Answer 2

为什么要循环显示模式中的详细信息？此外，您无需在每次需要显示模式窗口时再次调用您的 URL 来获取数据。只需将加载的数据保存在一个变量中，并将其用于所有后续点击。

我假设您正在根据用户单击链接打开模式窗口。您已经为这些链接定义了一个 ID（如果您认为它不是唯一的，则使其唯一）。该 id 只是需要在模式窗口上显示的数组元素的索引。只需获取数组元素并将详细信息设置为您的chickDesc。