別のリストの選択された値に基づいてangularjsのドロップダウンのオプションを無効にする

Question

1つのドロップダウンと2つの入力ボックスを含むテーブルに行があります。ユーザーは複数の行を追加および削除できます。ドロップダウンの1つの行で選択されている状態は、他の行では選択できません。たとえば、第1行目でデリーが選択されていて、ユーザーが他の行を追加した場合は、すべての行でデリを無効にする必要があります。私にそれを実装する方法を教えてください。私はお互いに依存しているドロップダウンを持っていた複数のソリューションを試しましたが、ここで私は行を追加しています。

http://plnkr.co/edit/o2NQFKitWB2ngdagr6zI?p=preview

HTML：：

<div class="row"> 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
    <div class="panel-group" id="accordion"> 
     <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1"> 
      <h4 class="panel-title">Country 
      </h4> 
      </a> 
     </div> 
     <div id="collapse1" class="panel-collapse collapse in"> 
      <div class="panel-body"> 
      <div class="rettbl-format"> 
       <div class="table-responsive"> 
       <table class="table tbl inv exp table-bordered"> 
        <thead> 
        <tr> 
         <th> 
         <input type="checkbox" class="chkbx" name="main" data-ng-model="selectedAll" data-ng-click="selectAllInterSups()"/> 
         <label for="main"></label> 
         </th> 
         <th class="text-center">State</th> 
         <th class="text-center">Total Value</th> 
         <th class="text-center">Actual Value</th> 
        </tr> 
        </thead> 
        <tbody> 
        <tr ng-repeat="objUnreg in interStateSup.unreg_details"> 
         <th> 
         <input type="checkbox" class="chkbx" name="objUnreg_{{$index}}" data-ng-model="objUnreg.selected"/> 
         <label for="objUnreg_{{$index}}"></label> 
         </th> 
         <td> 
         <select name="stcode" class="form-control" data-ng-model="objUnreg.pos" data-ng-options="item.c as item.c+' - '+item.n for item in unregBlkStates" data-ng-required="objUnreg.txval>0 || objUnreg.iamt>0"> 
          <option value="">Select</option> 
         </select> 
         <span ng-show="myForm.stcode.$error.required"></span> 
         </td> 
         <td> 
         <input class="form-control formedit newinv currency" data-ng-model="objUnreg.txval"/> 
         </td> 
         <td> 
         <input class="form-control formedit newinv currency" data-ng-model="objUnreg.iamt" /> 
         </td> 
        </tr> 
        </tbody> 
       </table> 
       <div class="row pull-right"> 
        <button type="button" class="btn btn-primary" data-ng-click="addNewUnRegSups()">ADD</button> 
        <button type="button" class="btn btn-danger" data-ng-click="removeSelectedUnRegSups()">REMOVE</button> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

JS：ハード

$scope.unregBlkStates = [{ 
    "c": "35", 
    "n": "Andaman and Nicobar Islands", 
    "u": "Y" 
}, { 
    "c": "37", 
    "n": "Andhra Pradesh", 
    "u": "N" 
}, { 
    "c": "12", 
    "n": "Arunachal Pradesh", 
    "u": "N" 
}, { 
    "c": "18", 
    "n": "Assam", 
    "u": "N" 
}, { 
    "c": "10", 
    "n": "Bihar", 
    "u": "N" 
}, { 
    "c": "04", 
    "n": "Chandigarh", 
    "u": "Y" 
}, { 
    "c": "22", 
    "n": "Chhattisgarh", 
    "u": "N" 
}, { 
    "c": "26", 
    "n": "Dadra and Nagar Haveli", 
    "u": "Y" 
}, { 
    "c": "25", 
    "n": "Daman and Diu", 
    "u": "Y" 
}, { 
    "c": "07", 
    "n": "Delhi", 
    "u": "N" 
}, { 
    "c": "30", 
    "n": "Goa", 
    "u": "N" 
}, { 
    "c": "24", 
    "n": "Gujarat", 
    "u": "N" 
}, { 
    "c": "06", 
    "n": "Haryana", 
    "u": "N" 
}, { 
    "c": "02", 
    "n": "Himachal Pradesh", 
    "u": "N" 
}, { 
    "c": "01", 
    "n": "Jammu and Kashmir", 
    "u": "N" 
}, { 
    "c": "20", 
    "n": "Jharkhand", 
    "u": "N" 
}, { 
    "c": "29", 
    "n": "Karnataka", 
    "u": "N" 
}, { 
    "c": "32", 
    "n": "Kerala", 
    "u": "N" 
}, { 
    "c": "31", 
    "n": "Lakshadweep", 
    "u": "Y" 
}, { 
    "c": "23", 
    "n": "Madhya Pradesh", 
    "u": "N" 
}, { 
    "c": "27", 
    "n": "Maharashtra", 
    "u": "N" 
}, { 
    "c": "14", 
    "n": "Manipur", 
    "u": "N" 
}, { 
    "c": "17", 
    "n": "Meghalaya", 
    "u": "N" 
}, { 
    "c": "15", 
    "n": "Mizoram", 
    "u": "N" 
}, { 
    "c": "13", 
    "n": "Nagaland", 
    "u": "N" 
}, { 
    "c": "21", 
    "n": "Odisha", 
    "u": "N" 
}, { 
    "c": "34", 
    "n": "Puducherry", 
    "u": "N" 
}, { 
    "c": "03", 
    "n": "Punjab", 
    "u": "N" 
}, { 
    "c": "08", 
    "n": "Rajasthan", 
    "u": "N" 
}, { 
    "c": "11", 
    "n": "Sikkim", 
    "u": "N" 
}, { 
    "c": "33", 
    "n": "Tamil Nadu", 
    "u": "N" 
}, { 
    "c": "36", 
    "n": "Telangana", 
    "u": "N" 
}, { 
    "c": "16", 
    "n": "Tripura", 
    "u": "N" 
}, { 
    "c": "09", 
    "n": "Uttar Pradesh", 
    "u": "N" 
}, { 
    "c": "05", 
    "n": "Uttarakhand", 
    "u": "N" 
}, { 
    "c": "19", 
    "n": "West Bengal", 
    "u": "N" 
}]; 

var emptyObj = { 
    'pos': 0, 
    'txval': 0.0, 
    'iamt': 0.0 
}; 
$scope.interStateSup = { 
    'unreg_details': [angular.copy(emptyObj)], 
}; 
$scope.goToPage = function (path) { 
    $location.path(path); 
}; 

$scope.selectedAll = false; 
$scope.selectAllInterSups = function() { 
    angular.forEach($scope.interStateSup.unreg_details, function (obj) { 
     obj.selected = $scope.selectedAll; 
    }); 
}; 

$scope.addNewUnRegSups = function() { 
    $scope.interStateSup.unreg_details.push(angular.copy(emptyObj)); 
}; 
$scope.removeSelectedUnRegSups = function() { 
    var newDataList = []; 
    $scope.selectedAll = false; 
    angular.forEach($scope.interStateSup.unreg_details, function (obj) { 
     if (obj.selected === undefined || (obj.selected !== undefined && !obj.selected)) { 
      newDataList.push(obj); 
     } 
    }); 
    $scope.interStateSup.unreg_details = newDataList; 
}; 

Answer 1

それが最善の解決策だが、それが動作するかどうかを言うためにここに私のコードのPlunkerリンクがあります。

app.filter('exclude', function() { 
    return function(list,currentModel,selected){ 
     var selectedLength = selected.length; 
     var out = []; 
     angular.forEach(list,function(listItem,index){ 
     var add = true; 
     for (var index = 0; index < selectedLength; index++) { 
      if(selected[index].pos !== currentModel && selected[index].pos === listItem.c){ 
      add = false; 
      break; 
      } 
     } 

     if(add){ 
      out.push(listItem); 
     } 

     }); 

     return out; 
    } 
}); 

HTML：：

<select name="stcode" class="form-control" data-ng-model="objUnreg.pos" data-ng-options="item.c as item.c+' - '+item.n for item in unregBlkStates|exclude:objUnreg.pos:interStateSup.unreg_details" data-ng-required="objUnreg.txval>0 || objUnreg.iamt>0"> 
    <option value="">Select</option> 
</select> 

http://plnkr.co/edit/zJnExGHQ9hJznoF4TyZI?p=preview

の