NG重复

Question

我有，我有angularjs和NG-重复的问题挣扎没有更新，我有被NG-重复生成的表：

<div> 
    <select ng-model="item" ng-controller="dropdown" 
     ng-change="update(item)"> 
     <option value="volvo">Volvo</option> 
     <option value="saab">Saab</option> 
    </select> 
    <table ng-controller="repeatTest"> 
     <tr> 
      <td>name</td> 
      <td>family name</td> 
      <td>score</td> 
     </tr> 
     <tr ng-repeat="item in list"> 
      <td>{{ item.name }}</td> 
      <td>{{ item.familyName }}</td> 
      <td>{{ item.score }}</td> 

     </tr> 


    </table> 


</div> 

和我的js代码如下：

var app = angular.module("myModule", []); 

app.service('sharedService', function() { 


    this.list = []; 

}); 
app.controller('dropdown', function($scope, sharedService) { 
$scope.update = function(item) { 
    if (item == "volvo") { 
     sharedService.list = [ { 
      name : 'A', 
      familyName : 'AA', 
      score : '10' 
     }, { 
      name : 'B', 
      familyName : 'BB', 
      score : '5' 
     } ]; 

     $scope.list = sharedService.list; 
     console.log($scope.list); 
    } else { 
     sharedService.list = [ { 
      name : 'zzz', 
      familyName : 'zzz', 
      score : '100' 
     }, { 
      name : 'zz', 
      familyName : 'zz', 
      score : '70' 
     } ]; 
     $scope.list = sharedService.list; 
    } 
} 

}); 
app.controller('repeatTest', function($scope, sharedService) { 
sharedService.list = [ { 
    name : 'xxx', 
    familyName : 'xxx', 
    score : 'xxx' 
}, { 
    name : 'xx', 
    familyName : 'xx', 
    score : 'xx' 
} ]; 

$scope.list = sharedService.list; 

}); 

现在我的问题是SI在页面加载生成的，当我改变选择框，虽然它应该是因为我绑定表，以列表这是在范围定义不会再更改表和我假设每当范围变化表也应该受到影响。谁能帮忙？

Answer 1

对于您的示例，您不需要两个控制器。

只需将下拉控制器分配给您的父div并删除repeatTest控制器。事情是这样的：

<div ng-controller="dropdown"> 
    <select ng-model="item" ng-change="update(item)"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    </select> 

    <table> 
    <tr> 
     <td>name</td> 
     <td>family name</td> 
     <td>score</td> 
    </tr> 
    <tr ng-repeat="item in list"> 
     <td>{{ item.name }}</td> 
     <td>{{ item.familyName }}</td> 
     <td>{{ item.score }}</td> 
    </tr> 
    </table> 
</div> 

所以，如果你有同时处理选择和表你不需要观看列表变量在您的服务更改相同的控制器。

你可以用这种方式解决或执行事件，但我认为这是很容易的。

这里正确的代码的jsbin：http://jsbin.com/sivapa/edit?html,js,console,output

Answer 2

您有两个范围，一个为每个控制器。通过分配$ scope.list，您实际上是通过引用传递给每个控制器的列表。所以，你应该清除并重新创建阵列无需重新分配$scope.list或sharedService.list，或者你可以：

两个控制器上添加

$scope.sharedService = sharedService; 

，并使用ng-repeat="item in sharedService.list"相反，你会得到你的更新。

您当前的解决方案无法正常工作的原因是您每次调用update时都会创建一个新阵列。这意味着其他控制器的列表仍然保持对原始/前一个数组的引用。

避免每次创建一个新的数组的例子：

var result = []; 
if (item == "volvo") { 
    result = [ { 
     name : 'A', 
     familyName : 'AA', 
     score : '10' 
    }, { 
     name : 'B', 
     familyName : 'BB', 
     score : '5' 
    } ]; 
} else { 
    result = [ { 
     name : 'zzz', 
     familyName : 'zzz', 
     score : '100' 
    }, { 
     name : 'zz', 
     familyName : 'zz', 
     score : '70' 
    } ]; 
} 

//Clear array 
sharedService.list.splice(0,sharedService.list.length); 
//Copy values from result into existing array 
sharedService.list.push.apply(sharedService.list, result); 

请注意，这是未经测试。而且你还必须在某处执行$ scope.list的初始任务。

Answer 3

'repeatTest'控制器无法知道服务数据已经改变......除非您告诉它注意这一点。试试这个版本控制器：

app.controller('repeatTest', function($scope, sharedService) { 

    $scope.list = sharedService.list; 

    $scope.$watch(function() { 
     return sharedService.list; 
    }, 
    function(o, n) { 
     if (o != n) $scope.list = n 
    }); 
}); 

此外，由于你的下拉控制器不直接影响repeatTest列表中，您不需要在控制器更新$ scope.list：

app.controller('dropdown', function($scope, sharedService) { 
    $scope.update = function(item) { 
    console.log(item); 
    if (item == "volvo") { 
     sharedService.list = [{ 
     name: 'A', 
     familyName: 'AA', 
     score: '10' 
     }, { 
     name: 'B', 
     familyName: 'BB', 
     score: '5' 
     }]; 
    } else { 
     sharedService.list = [{ 
     name: 'BMW', 
     familyName: 'Germany', 
     score: '100' 
     }, { 
     name: 'Frari', 
     familyName: 'America', 
     score: '100' 
     }]; 
    } 
    } 
    // Do a little initialization 
    $scope.item="volvo"; 
    $scope.update($scope.item); 
}); 

这里是一个plunk：http://plnkr.co/edit/42snC2WyfdKfNzrIKA0o