2016-11-12 7 views
0

デフォルトでは、selectがバインドされているソースリストを変更すると、選択されたリストアイテムが完全に存在していてもクリアされます。新しいリスト私は角度があることを示す方法があるかもしれないと思っています、彼らは同じWhateverKeyプロパティを持っている場合は、それらを同じアイテムとみなし、選択を解除しないでください。これを行う方法はありますか?角度:リストが変更されたときに以前に選択したオブジェクトに再バインドする方法

以下の例では、新しい顧客を選択すると、候補リストの再バインド(考える:再ダウンロード)が行われますが、選択された場所($scope.Location)はまだ新しいリストに存在するため、選択する必要があります。

私は問題は文字通り異なる角度オブジェクトキーを持つ異なる参照オブジェクトだということを理解しています。私は、オブジェクトのプロパティ(この場合はLocationKey)に基づいて、新しいリスト内の対応するオブジェクトを手動で見つけるためにJavaScript経由でループすることなく、自動的に再バインドする方法を尋ねています。

function Ctrl($scope) { 
 
    $scope.Customers = [{CustomerKey: 1, CustomerCode: 'Customer1'}, 
 
         {CustomerKey: 2, CustomerCode: 'Customer2'}, 
 
         {CustomerKey: 3, CustomerCode: 'Customer3'}]; 
 
    $scope.Locations = [{LocationKey: 1, LocationCode: 'Location1'}, 
 
         {LocationKey: 2, LocationCode: 'Location2'}, 
 
         {LocationKey: 3, LocationCode: 'Location3'}]; 
 
    $scope.Customer = $scope.Customers[0]; 
 
    $scope.Location = $scope.Locations[0]; 
 
         
 
    $scope.SelectCustomer = function() { 
 
    $scope.Locations = angular.copy($scope.Locations); 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app ng-controller="Ctrl"> 
 
    <select ng-model="Customer" 
 
      ng-options="c as c.CustomerCode for c in Customers" 
 
      ng-change="SelectCustomer()"></select> 
 
    <select ng-model="Location" 
 
      ng-options="l as l.LocationCode for l in Locations"></select> 
 
    <div ng-bind="'Customer: ' + Customer.CustomerCode"></div> 
 
    <div ng-bind="'Location: ' + Location.LocationCode"></div> 
 
</div>

答えて

0
$scope.SelectCustomer = function() { 

    $scope.Locations = angular.copy($scope.Locations); 
    $scope.Location = $scope.Locations.find(function(loc){ 
    return loc.LocationKey === $scope.LocationKey; 
    } 
} 

怠惰な答えのために申し訳ありません。あなたがコメントの中でコードを適切に書式設定できるなら、コメントであったでしょうか?

+0

これは機能しません。あなたは 'LocationKey'がインデックスと同じであることを暗示しています。これはここで真実ではなく(これは1でオフです)、キーが任意の数であるライブ環境では真実ではありません。 –

+0

ああ、もちろんそうです。 ES6の回答で更新されました。もちろん、これは「新しいリスト内の対応するオブジェクトを手動で見つけるためにJavaScriptをループすることに頼らずに」ではありません。 – ippi

関連する問題