Question

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

代码工作正常但它会在所有项目列表中使用类ng-hide添加图像的html内容。

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

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>

images.html

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

控制器

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

Answer 1

您可以设置范围变量，例如activeProject，并将其用作视图中的条件。将整个item作为displayImages()的参数传递。使用ng-if将activeProject与每个item

进行比较

HTML

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

JS

$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;
    })
}

Answer 2

您应该使用图像div中的条件来显示正确的项目图像。

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>

也可以使用 ng-if 代替 ng-show

images.html中的

：像往常一样你可以使用 ng-src 而不是 src

控制器中

：：

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

Angularjs ng-repeat必须只显示在一个<li>中

2 个答案: