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

Question

I have a ng-repeat to display multiple projects. When I click View Images button it will display images inside that project.

The code works fine but it will add the html content of the images in all list of projects with a class ng-hide.

How can I display the ng-repeat of the images in a single li only in the lists of project

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>

Controller

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

Answer 1

You could set a scope variable such as activeProject and use that as a conditional in the view. Will pass the whole item as argument of displayImages() . Use ng-if to compare activeProject to each 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

You should use condition in image div to show proper project images.

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

also can use ng-if instead of ng-show

in images.html: as usual but you can yse use ng-src instead of src

in controller: :

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