Angular ng-repeatの国のリストから2つの特定の国を選択した場合の国の状態の表示方法

Question

私は国のリストを持っており、クライアントは2つを選択できます。クライアントがチェックボックスのチェックを使用して2つの国を選択すると（2つの国のチェックボックスをクリックして）、ng-repeatを使用して2つの国の州を表示する必要があります。

このシナリオでは、順序付けられていないリストの小さな例とng-repeatの使い方を教えてください。

私はAngularを初めて利用しています。

Answer 1

HTMLの限りでは、以下のようなものは、あなたが最終的にどのようなものになっているかの非常に簡単な例です。 2つのng-repeatを使用できます。

Answer 2

各国に「チェックされた」プロパティを追加するチェックボックスを作成することができます。そして、チェックされたものだけを繰り返すリピート。

ビュー

<p> 
    Choose {{limit}} countries: 
    </p> 
    <p ng-repeat="country in countries"> 
    <input type="checkbox" ng-model="country.checked" ng-disabled="(countries | filter:{checked:true}).length >= limit"> {{country.name}} 
    </p> 

    <p> 
    Result 
    </p> 
    <div ng-repeat="country in countries | filter:{checked:true}"> 
    <h1>{{country.name}}</h1> 
    <ul> 
     <li ng-repeat="state in country.states"> 
     <p>{{state}}</p> 
     </li> 
    </ul> 
    </div> 

</div> 

コントローラ

angular.module("app", []) 
    .controller("mainCtrl", function($scope) { 

    $scope.limit = 2; 

    $scope.countries = [{ 
     "name": "Finland", 
     "states": [ 
     "statename1", 
     "statename2" 
     ] 
    }, { 
     "name": "Sweden", 
     "states": [ 
     "statename3", 
     "statename4" 
     ] 
    }, { 
     "name": "Norway", 
     "states": [ 
     "statename5", 
     "statename6" 
     ] 
    }]; 

    }); 

デモ：https://jsfiddle.net/ptfg5xs0/1/