1

ドロップダウンの上にあるドロップダウンで何かが選択されている場合にのみ、ドロップダウンを設定しようとしています。このようなもので、誰かに正しい出発方向を教えてもらいました。

<select class="selectLevel0" ng-model='scope1' ng-change='scope1Change()' 
        ng-options='obj.name for obj in array track by obj.id'>
</select>

<select class="selectLevel1" ng-model="scope2"  ng-change='scope2Change()' 
        ng-options='obj.name for obj in array2 track by obj.id' ng-hide='!scope1'>
</select>

<select class="selectLevel2" ng-model="scope3" ng-change='scope3Change()' 
        ng-options='obj.name for obj in array3 track by obj.id' ng-hide='!scope2'>
</select>

<select class="selectLevel3" ng-model="scope4" ng-change='scope4Change()' 
        ng-options='obj.name for obj in array4 track by obj.id' ng-hide='!scope3'>
</select>

<select class="selectLevel4" ng-model="scope5" 
        ng-options='obj.name for obj in array5 track by obj.id' ng-hide='!scope4'>
</select>

これは最初のラウンドでは問題ありません。下のドロップダウンは、前のドロップダウンで何かが選択されるまで入力されません。トリッキーな部分は、5番目のものまでずっと選択したと言って、2番目のレベルのものを再選択するかどうかを理解しようとしていることです. 次に、3 番目のレベルを表示し、4-5 を非表示にします。おそらく ng_show="!scope2 || !scope3" (または複数の引数を渡す場合に似たもの) のようなものを考えていましたが、このようなものを角度で動作させることはできません。これに対処するより良い方法はありますか？

4

1 に答える 1

2

おそらく、データを再配置してロジックを少し調整することで、繰り返しを避けようとします。私は 1 つを選択するだけng-repeatで、ソース データは2D配列になります。

例：-

//It does not matter where i get the data from 
$scope.selects = [[{name:'level11', id:1}, {name:'level12', id:2}, {name:'level13', id:3}], 
    [{name:'level21', id:1}, {name:'level22', id:2}, {name:'level23', id:3}],
    [{name:'level31', id:1}, {name:'level32', id:2}, {name:'level33', id:3}],
    [{name:'level41', id:1}, {name:'level42', id:2}, {name:'level43', id:3}],
    [{name:'level51', id:1}, {name:'level52', id:2}, {name:'level53', id:3}]];

次に、それぞれのモデルを格納するための配列を保持します:-

$scope.selected = Array.apply(null, { length: $scope.selects.length }).map(Object);

次にchangehandler、それらすべてに対して1つだけを用意します。現在、インデックスを渡すと、データを渡すことさえできます。

 $scope.handleChange = function(index) {
     //reset data for others when a dropdown in selected
     $scope.selected = $scope.selected.map(function(itm, idx){
           return (idx > index) ? {} : itm;
     });

    //This will give you selected value of the current item if you need
    var selected = $scope.selected[index];
    //DO something with the value
  }

そして最後に、私のマークアップは次のようになります:-

<select ng-repeat="select in selects" ng-class="selectLevel{{$index}}"
         ng-change='handleChange($index)' <!-- Handler for Change event pass index of even model -->
         ng-model='selected[$index].value' <!-- Yes this is the model -->
         ng-show='!$index || selected[$index-1].value' <!-- Show only if its previous model has a value -->
         ng-options='obj.name for obj in select track by obj.id'>
</select>

デモ

于 2014-08-20T22:03:40.147 に答える