CODEWITHSUNDEEP
javascriptangularjs
saravanan mp
saravanan mp

Reputation: 783

Change ng-repeat value using another controller

I'm new to Angular JS. Here is my code

<div ng-controller="firstCtrl">
    <div  ng-repeat="city in citynames">
        <p>{{city.name}}</p>
    </div>
</div>

<div ng-controller="secondCtrl">
    <button ng-click="changethis()">Click Here</button>
</div>

var app=angular.module('mainApp',[]);
    app.controller('firstCtrl',['$scope','$http',function($scope,$http){
        $scope.citynames=[{name:'Chennai',id:'1'},
            {name:'Bangalore',id:'2'},
            {name:'Hyderabad',id:'3'},
            {name:'Coimbatore',id:'4'},
            {name:'Mysore',id:'5'},
            ];
       }]);
    app.controller('secondCtrl',['$scope','$http',function($scope,$http){
        $scope.changethis=function(){
            $scope.citynames=[{name:'Delhi',id:'1'},
            {name:'Sydney',id:'2'},
            {name:'Newyork',id:'3'},
            {name:'London',id:'4'},
            ];
        };

       }]);

I want to change first controller ng-repeat while clicking second controller ng-click event. But using this code its not changing.

Upvotes: 1

Views: 71

Answers (5)

aurelius
aurelius

Reputation: 4076

One other solution would be to use the $rootScope, but this object should not be polluted. Here you have a working example.

var app=angular.module('app',[]);
app.controller('firstCtrl',['$rootScope','$http',function($rootScope,$http){
  $rootScope.citynames=[{name:'Chennai',id:'1'},
      {name:'Bangalore',id:'2'},
      {name:'Hyderabad',id:'3'},
      {name:'Coimbatore',id:'4'},
      {name:'Mysore',id:'5'},
      ];
 }]);

app.controller('secondCtrl',['$rootScope','$http',function($rootScope,$http){
    $rootScope.changethis=function(){
        $rootScope.citynames=[{name:'Delhi',id:'1'},
          {name:'Sydney',id:'2'},
          {name:'Newyork',id:'3'},
          {name:'London',id:'4'},
        ];
    };
}]);

Upvotes: 0

David Ortiz
David Ortiz

Reputation: 995

You can use the same controller for both the ng-repeat and the click. In this way you'll hace the same $scope and in the click just change the $scope that will automatically change your ng-repeat.

Much simpler and cleaner having the functionality in just one controller in this case.

<div ng-controller="Ctrl"> 
 <div ng-repeat="city in citynames"> 
  <p>{{city.name}}</p> 
 </div> 
 <button ng-click="changethis()">Click Here</button> 
</div> 

var app=angular.module('mainApp',[]); 
app.controller('Ctrl',['$scope','$http',function($scope,$http){  
 $scope.citynames=[{name: 
  'Chennai',id:'1'}, {name:
  'Bangalore',id:'2'}, {name:
  'Hyderabad',id:'3'}, {name:
  'Coimbatore',id:'4'}, {name:
  'Mysore',id:'5'}, ]; }]); 

 $scope.changethis=function(){
  $scope.citynames=[{name:'Delhi',id:'1'}, {name:'Sydney',id:'2'}, {name:'Newyork',id:'3'}, {name:'London',id:'4'}, ]; }; }
]);

In this approach you have one controller to "rule them all". This is great for these times that you have similar functionalities or you are working on the same variables from the same view. I really recommend one controller per view and use the factories just when you need to persist data from one view to another.

Hope it helps

Upvotes: 0

sjm
sjm

Reputation: 5468

Each controller has a separate scope, you can either use $rootScope https://docs.angularjs.org/api/ng/service/$rootScope which is a global scope or use a angular service/factory https://docs.angularjs.org/guide/services to share the scope between controllers.

Upvotes: 2

Jay Patel
Jay Patel

Reputation: 5793

You can do it like this..

    var app=angular.module('mainApp',[]);
    app.controller('firstCtrl',['$scope','$http',function($scope,$http){
        $scope.citynames=[
            {name:'Chennai',id:'1'},
            {name:'Bangalore',id:'2'},
            {name:'Hyderabad',id:'3'},
            {name:'Coimbatore',id:'4'},
            {name:'Mysore',id:'5'},
            ];

       $scope.$on("changeCities",function(){
            $scope.citynames=[{name:'Delhi',id:'1'},
               {name:'Sydney',id:'2'},
               {name:'Newyork',id:'3'},
               {name:'London',id:'4'},
            ];
       });
       }]);


    app.controller('secondCtrl',['$scope','$http',function($scope,$http){
        $scope.$broadcast("changeCities");
    }]);

Upvotes: 0

ngLover
ngLover

Reputation: 4578

Both have different scope so it is not possible in any easy manner you can use emit or broadcast method if DOM have parent child relationship between them.

or you can use $controller service . 

app.controller('secondCtrl',  ['$scope','$http','$controller',function($scope,$http,$controller){
        var scopeSecond;       
    $controller("firstCtrl",{'$scope': scopeSecond})   

         $scope.changethis=function(){
                    scopeSecond.citynames=[{name:'Delhi',id:'1'},
                    {name:'Sydney',id:'2'},
                    {name:'Newyork',id:'3'},
                    {name:'London',id:'4'},
                    ];
                };

               }]);

Upvotes: 1

Related Questions