Javascript在点击事件中显示来自for循环的被点击项目

Question 1

谁能帮助我一下。我从wordpress api(get_posts)获得一个帖子的列表。一旦我得到这些帖子，我就把它们显示在一个 <a> 标签的列表中。在每个 <a> 标签中都有一个标题和帖子的描述。所有这些都是在ionic框架的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>

Question 2


           
            
             
              
               
                
                 
                  
                   你的
                   
                    
                     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}这样的端点，只获取一个帖子。这将确保你有关于你所选择的帖子的最新数据。