使用另一个控制器更改ng重复值

Change ng-repeat value using another controller

本文关键字：ng 另一个 控制器      更新时间：2023-09-26

我是Angular JS的新手。这是我的代码

<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'},
            ];
        };
       }]);

我想在单击第二个控制器ng-click事件的同时更改第一个控制器ng-repeat。但是使用这个代码并没有改变。

每个控制器都有一个单独的作用域，您可以使用$rootScopehttps://docs.angularjs.org/api/ng/service/$rootScope，它是全局范围或使用角度服务/工厂https://docs.angularjs.org/guide/services以在控制器之间共享作用域。

两者都有不同的作用域，因此如果DOM之间有父子关系，则不可能以任何简单的方式使用emit或broadcast方法。

也可以使用$controller服务。

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'},
                    ];
                };
               }]);

你可以这样做。。

    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");
    }]);

您可以对ng repeat和click使用相同的控制器。通过这种方式，您将获得相同的$scope，并在单击中更改$scope即可自动更改ng重复。

在这种情况下，只需在一个控制器中就可以实现更简单、更清洁的功能。

<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'}, ]; }; }
]);

在这种方法中，您有一个控制器来"统治它们"。这对于具有类似功能或从同一视图处理相同变量的情况非常好。我真的建议每个视图一个控制器，并在需要将数据从一个视图持久化到另一个视图时使用工厂。

希望它能帮助

另一个解决方案是使用$rootScope，但该对象不应受到污染。这里有一个工作示例。

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'},
        ];
    };
}]);
相关文章：