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