How to change json data while making click in AngularJs

Posted by Manideepgoud under AngularJS 1x on 11/22/2018 | Points: 10 | Views : 144 | Status : [Member] | Replies : 1
Hi,

I have Two Div sections.

In the first div section, I have 10 details of first person, and in the second div section i have three details of the second person.

My question is.

When i click the second div section(with three details of second person).It should show in the first div section(with all ten details ) and first person details should show in the second div section with only three details.




Responses

Posted by: Manideepgoud on: 11/23/2018 [Member] Starter | Points: 25

Up
0
Down
Hi Every One,

I only found this solution, below is the code snippet for my requirement.

<!DOCTYPE html>
<html>

<head>
<title>Practice</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<style>
.myfirstdiv {
border: 1px solid black;
height: 100px;
width: 300px;

}
.myseconddiv {
border: 1px solid black;
height: 100px;
width: 150px;
}

.mythirddiv {
border: 1px solid black;
height: 100px;
width: 150px;
}
.maindiv{
display:inline-flex;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<div class="container">
<p>Customers</p>
<div class="maindiv">
<div class="myfirstdiv" ng-if="$index=='0'" ng-repeat="x in names">
<p>{{x.name}}</p>
<p>{{x.mail}}</p>
<p>{{x.city}}</p>
</div>
<div class="myseconddiv" ng-if="$index=='1'" ng-repeat="x in names" ng-click="swapfunction(x,$index)">
{{x.name}}
{{x.mail}}
</div>
<div class="mythirddiv" ng-if="$index=='2'" ng-repeat="x in names" ng-click="swapfunction(x,$index)">
{{x.name}}
{{x.mail}}
</div>
</div>
</div>
<script>
var app = angular.module("myapp", []);
app.controller("myctrl", function($scope) {
$scope.names = [{
"name": "Ramesh",
"mail": "ramesh@gmail.com",
"city":"Hyderabad"
},
{
"name": "Suresh",
"mail": "suresh@gmail.com",
"city":"Banglore"
},
{
"name": "varun",
"mail": "varun@gmail.com",
"city":"Chennai"
}
]
$scope.swapfunction=function(itemobj,indexval){
debugger;
var mydata=$scope.names[0]
$scope.names[0]=itemobj;
$scope.names[indexval]=mydata;
}
});
</script>
</body>
</html>


I think this code might help you guys...

Manideepgoud, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response