How to change json data while making click in AngularJs

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

Write New Post |

Search Forums | Answered

Resolved Posts |

Un Answered Posts |

Forums Home

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.

Reply | Reply with Attachment

Alert Moderator

Responses

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

0	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

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

Latest Posts