ドロップダウンの値に基づいてng-repeat内のshow div

Question

以下は予想よりも多くの時間を要しています。一番上のスタックソリューションを経たと何とか私はドロップダウンでNGリピートdiv要素を持っているのscenerio

IS WHAT thing--

下になりました。

ドロップダウンには値が含まれ、これらの値の選択に基づいてdivが表示されます。私が管理しているのはdivです。しかし、別のアイテムを選択すると、前のアイテムdivが非表示になります。

は、以下のスクリーンショットと、私が最初の項目を選択したときに、それがテキストボックスのdiv要素を示していることを見ることができるように私のコード

です。しかし、次のアイテムを選択すると、最初に隠されます。本質的に2つの値、ALL、Fixedがあります。選択したものがすべて表示されず、固定が選択されると、その特定のアイテムのdivが表示されます。

HTMLコード

    <div class="tst text-success" ng-repeat="(parentIndex, catList) in categoryArray"> 
         <div class="col-md-3"> 
         {{catList.categoryName}} 
         </div> 
         <div class="col-md-4"> 
         <select class="form-control m-b" ng-model="catObj.cats" ng-change="changeOption(catObj,parentIndex)"> 
         <option value="All">All</option> 
         <option value="fixed">Fixed No. Of Records</option> 
         <option value="perfixed">% od Fixed</option> 
         </select> 
         </div> 
         <div class="col-md-3 noPad" ng-if="isShowing==parentIndex"> 
         <input type="text" class="form-control form-control-small" placeholder="Set Number" /> 
         </div> 
        </div> 

CONTROLLER

$scope.changeOption = function(obVal,index) { 
    console.log(obVal); 
    console.log(index); 
    if(obVal.cats == "All") { 
     //$scope.tbx = 0; 
    } 
    else { 
     $scope.isShowing = index; 
    } 

    } 

ヘルプあなたは可視性を制御するために、単一ブール$スコープ変数、isShowingを使用している おかげ

Answer 1

をいただければ幸いです複数d ivs。それはおそらくうまくいかない。

あなたは

1. は、各selectedOptionフィールドを持つ、オブジェクトの配列を持っている必要があります。
2. 選択ボックスでng-modelを使用して、編集中のオブジェクトのselectedOptionを設定します。
3. オブジェクトのselectedOptionの値を使用して、追加の入力をそのオブジェクトで表示する必要があるかどうかを確認します。

例：あなたはすべての繰り返しオブジェクトを変更している

<div ng-repeat="obj in objects"> 
    {{ obj.name }} 
    <select name="op" ng-model="obj.selectedOption" ng-options="option.value as option.value for option in options"></select> 
    <input ng-if="obj.selectedOption !== 'All'" /> 
</div> 

app.controller('MainCtrl', function($scope) { 
    $scope.options = [ 
    {value: 'All'}, 
    {value: 'Fixed'} 
    ]; 

    $scope.objects = [ 
    {name: 'Twitter', selectedOption: 'All'}, 
    {name: 'News', selectedOption: 'Fixed'} 
    ] 
});