Javascript Angularjs ng repeat必须仅显示在单个<；李>；

我有一个ng repeat来显示多个项目。当我单击查看图像按钮时，它将显示该项目内的图像

代码运行良好，但它将在所有项目列表中添加图像的html内容，并使用ng hide类

如何仅在项目列表中显示单个li中图像的ng重复

projects.html

<ul>
    <li ng-repeat="item in projects">
        <p>{{ item.name }}</p>
        <p><button ng-click="displayImages(item.id)">View Images</button></p>
        <div ng-include="/static/images.html"></div>
    </li>
</ul>

<ul>
    <li ng-repeat="image in images">
        <p>{{ image.name }}</p>
        <img src="{{ image.src }}">
    </li>
</ul>

---

您可以设置范围变量，例如

activeProject

，并在视图中将其用作条件变量。将整个

项作为
displayImages（）
的参数传递。使用
ng if
将
activeProject
与每个
项目进行比较

HTML

您应该在image div中使用condition来显示正确的项目图像

在projects.html中：

<ul>
    <li ng-repeat="item in projects">
        <p>{{ item.name }}</p>
        <p><button ng-click="displayImages(item.id)">View Images</button></p>
        <div ng-show="item.id === pid" ng-include="/static/images.html"></div>
    </li>
</ul>

这个问题不是很清楚。
单身
是什么意思？
项目
数组和
图像
数组之间的关系是什么？
displayImages（）
做什么？显示更多代码并更新问题描述以使其更易于理解显示控制器，如果不查看范围构造，就不可能回答问题。如何将图像链接到项目？问题是my ng中所有重复的项目都有my images.html的html代码。。它不显示，但当我检查元素源代码时，它有代码。我希望，当我单击查看图像按钮时，my Images.html仅在单击按钮的
中呈现..我已经更新了我的问题。唯一的问题是，当我检查源代码时，images.html代码显示在所有ng repeat项目的
中。如果不需要，加载大量图像是没有意义的<代码>ng if
我认为比
ng show
更好的选择。因此，如果不需要第一次渲染image.html，也可以使用ng。单击“仅查看图像”时，条件满足project images.html render，单击另一个项目视图图像时，上一个渲染的图像将被销毁。html destroy.not destroy未完全销毁…它们仍将位于浏览器缓存中，可能是，但据我所知，如果使用编译状态重新创建元素，则会从DOM元素和ng中完全销毁。
<li ng-repeat="item in projects">
        <p>{{ item.name }}</p>
        <p><button ng-click="displayImages(item)">View Images</button></p>
        <!--  add ng-if conditional -->
        <div ng-if="item == activeProject" ng-include="/static/images.html"></div>
</li>

$scope.displayImages = function(project){
    var pid = project.id;
    req = {
        "method": "GET",
        "url": "/api/v1/" + pid + "/",
    }
    $http(req).success(function(response, status){
        // assign the active project
        $scope.activeProject = project;
        $scope.images = response;
    })
}

<ul>
    <li ng-repeat="item in projects">
        <p>{{ item.name }}</p>
        <p><button ng-click="displayImages(item.id)">View Images</button></p>
        <div ng-show="item.id === pid" ng-include="/static/images.html"></div>
    </li>
</ul>

$scope.displayImages = function(pid){
    $scope.pid = pid;
    req = {
        "method": "GET",
        "url": "/api/v1/" + pid + "/",
    }
    $http(req).success(function(response, status){
        $scope.images = response;
    })
};