ng-if in ng-repeat 在点击事件上重新创建元素答案

【问题标题】：ng-if in ng-repeat recreating elements on click eventsng-if in ng-repeat 在点击事件上重新创建元素
【发布时间】：2016-06-12 01:00:51
【问题描述】：

当用户单击它时，我想用 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 变为 true。

它在一个部分中完美运行。但是当有 2 个部分时，它显示 2 个图像。当我第一次点击它时，它会被一个锚元素替换。

但如果点击第二张图片，它会替换为 2 个锚标签。

我怎样才能做到？有什么解决方案可以在 ng-repeat 中通过锚点替换图像元素？

【问题讨论】：

你应该试试ng-hide, ng-show
事情是我想替换元素..
你能提供jsfiddle.net链接吗？
请提供完整的工作代码

标签： javascript jquery angularjs if-statement dom

【解决方案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>

【讨论】：