ng-if in ng-repeat воссоздающие элементы при событиях щелчка

Question

Я хотел заменить тег привязки img, когда пользователь нажал на него. Мой пример кода, как

<div ng-repeat="postpart in currentPost.parts "> 



    <div ng-if = "!postpart.isclicked"> 
      <img ng-src="{{imgurl}}" ng-click="iclicked(postpart)"/> 
    </div> 

    <div ng-if = "postpart.isclicked"> 
     <a ng-href="{{postpart.description}}" ng-init="init()"></a> 
    </div> 



</div> 

iclicked функции просто сделать isclicked истина.

Он отлично работал для одной части. Но когда есть 2 части, он показывает 2 изображения. Когда я нажимаю сначала, он заменяется одним элементом привязки.

Но в случае 2-го изображения его заменяет 2 анкерных метки.

Как я могу это сделать? есть ли решение заменить элемент изображения якорем в ng-repeat?

Answer 1

Может помочь вам.

var app = angular.module("app",[]); 
 

 
app.controller("ctrl" , function($scope){ 
 
    
 
    $scope.parts = [ 
 
    {"description": "This is a test","isclicked":false,"type":"MEDIA"}, 
 
    {"description": "This is a test2","isclicked":false,"type":"MEDIA"}, 
 
    {"description": "This is a test3","isclicked":false,"type":"MEDIA"}, 
 
    {"description": "This is a test4","isclicked":false,"type":"MEDIA"} 
 
    
 
    ]; 
 
    
 
    $scope.iclicked = function(index){ 
 
    $scope.parts[index].isclicked = !$scope.parts[index].isclicked; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
    <div ng-repeat="part in parts"> 
 
    <div ng-show = "!part.isclicked"> 
 
     <img src="/images/1.png" ng-click="iclicked($index)"/> 
 
    </div> 
 

 
    <div ng-show = "part.isclicked"> 
 
     <a href="part.description" >{{part.description}}</a> 
 
    </div> 
 
    </div> 
 
</div>