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

有人能帮我吗。我从WordPressAPI（get_POSTS）获得一个帖子列表。一旦我得到帖子，我就会在

标签列表中显示它们。在每个

标记中都有一个帖子的标题和描述。所有这些都是在ionic框架内用javascript动态完成的

我的问题来了。显示帖子列表后，我需要单击列表中的单个帖子项目，然后需要向我显示更多详细信息（即摘录）。然而，我只是成功地显示了每个职位的细节，而不仅仅是选定的一个。我以模态的形式展示这段摘录

我的代码如下

Javascript //在页面输入时调用JSON API//获取文章列表并将其填充到标记中//标记已添加标题和说明

.controller（'chickenCtrl'，函数（$scope、$stateParams、$window、$http、$state、$IonicModel、$ionicLoading）{
$scope.$on（'$ionicView.enter'，函数（）{
$scope.result=“”；
$scope.categories=“”；
$http.get（'http://dhameergovind.co.za/wp/api/get_posts/')
.success（函数（数据、状态、标题、配置）{
var i；
var j；
对于（i=0；i'
'+ChickendesObj+'
'+'+'+'
；
}
否则{
警报（“不存在”）
}
}
}
$scope.result=data；//用于用户界面
})
.error（函数（数据、状态、标题、配置）{
console.log（“数据错误”）；
$ionicLoading.hide（）；
})
.然后（函数（结果）{
事物=结果。数据；
$ionicLoading.hide（）；
});
});

//单击帖子后，将打开一个模式以显示所选帖子的详细信息（摘录）

$ionicModal.fromTemplateUrl（'templates/recipeModal.html'，{scope:$scope}）。然后（函数（modal）{$scope.modal=modal；}）
$scope.$on（'modal.show'，函数（e）{
$ionicLoading.show({
内容：“正在加载”，
动画：《涟漪》，
真的,，
最大宽度：200，
显示延迟：0
});
$scope.result=“”；
$scope.categories=“”；
$http.get（'http://dhameergovind.co.za/wp/api/get_posts/')
.success（函数（数据、状态、标题、配置）{
var i；
对于（i=0；i'+chickenDescExerptObj++
'+'+'
；
$ionicLoading.hide（）；
}
$scope.result=data；//用于用户界面
})
.error（函数（数据、状态、标题、配置）{
console.log（“数据错误”）；
$ionicLoading.hide（）；
})
.然后（函数（结果）{
事物=结果。数据；
$ionicLoading.hide（）；
});
});
})

//HTML

//模式HTML

接近

您的

ng点击

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

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

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

$scope.posts = data

现在，在显示的on模式中，删除for循环并只保留其主体，替换

$scope。单击_index

，而不是每次使用

i

另外，您不应该调用

$http.get（'http://dhameergovind.co.za/wp/api/get_posts/）

再次。这是低效的，并且可能会导致您看到错误的数据，以防添加了新的帖子并且索引不匹配。相反，在您第一次在on enter中的成功函数中获取数据时，请将其保存。大概是这样的：

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

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

$scope.posts = data

或者，更高级一点，您可以创建一个端点，如

http://dhameergovind.co.za/wp/api/get_posts/{post_id}

只获得一篇文章。这将确保您拥有所选帖子的最新数据

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

---

但我的答案是，您可以对代码进行最小的更改，以使其满足您的需要。

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

我假设您正在打开基于用户单击链接的模式窗口。你爱我吗

$scope.posts = data