javascript - ng-if in ng-repeat recreating elements on click events -
i wanted replace anchor tag img when user clicked on it. sample code like
<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 function make isclicked true.
it worked 1 part. when there 2 parts showing 2 images. when click on first replaces 1 anchor element.
but in case of 2nd image click replaces 2 anchor tags.
how can able make it? there solution replace image element anchor in ng-repeat?
may you.
var app = angular.module("app",[]); app.controller("ctrl" , function($scope){ $scope.parts = [ {"description": "this test","isclicked":false,"type":"media"}, {"description": "this test2","isclicked":false,"type":"media"}, {"description": "this test3","isclicked":false,"type":"media"}, {"description": "this 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>
Comments
Post a Comment