2016-05-17 2 views
2

私はこれをかなり苦労していましたが、実現するのはもっと簡単です。Angular.JSを使って前のコンテンツの内容に応じて選択を無効にする

私は現在、入力テキスト領域と2つのコンボボックスを持つ単純なフォームを構築しています。 これらの2つのコンボボックスは契約タイプを表し、最初のボックス選択は2番目のコンボボックスで使用可能なオプションを制限する必要があります。

がここに抜粋です:だから

var app = angular.module('riskQueries', []); 
 

 
    app.controller('cuitCtrl', function($scope) { 
 
    $scope.defaultCuit = { 
 
     cuit: "99-99999999-9" 
 
    }; 
 
    $scope.reset = function() { 
 
     $scope.riskData = angular.copy($scope.defaultCuit); 
 
    }; 
 
    $scope.reset(); 
 
    $scope.comboData = { 
 
     planAnterior: null, 
 
     planSolicitado: null, 
 
     options: [{ 
 
     id: "0", 
 
     name: "No tengo un plan" 
 
     }, { 
 
     id: "1", 
 
     name: "Plan Básico" 
 
     }, { 
 
     id: "2", 
 
     name: "Plan Joven" 
 
     }, { 
 
     id: "3", 
 
     name: "Plan Famliar" 
 
     }, { 
 
     id: "4", 
 
     name: "Plan Cobertura Completa" 
 
     }, { 
 
     id: "5", 
 
     name: "Plan Plus" 
 
     }], 
 
    }; 
 
    }); 
 

 

 
    app.filter('selectedPlan', function() { 
 
    return function(planAnterior, planSolicitado) { 
 
     planAnterior == planSolicitado; 
 
    }; 
 
    });
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 

 
<body> 
 
    <div ng-app="riskQueries" ng-controller="cuitCtrl"> 
 
    <form name="BPMForm"> 
 
     <label for="Cuit">CUIT/CUIL:</label> 
 
     <input name="Cuit" type="text" ng-model="riskData.cuit"> 
 
     <br> 
 
     <br> 
 
     <label for="PlanAnterior">Plan Actual:</label> 
 
     <select name="PlanAnterior" id="PlanAnterior" ng-model="comboData.planAnterior" ng-options="option.name for option in comboData.options"> 
 
     <option value="">---Seleccione su plan Actual---</option> 
 
     </select> 
 
     <br> 
 
     <br> 
 
     <label for="PlanSolicitado">Plan Solicitado:</label> 
 
     <select name="PlanSolicitado" id="PlanSolicitado" ng-model="comboData.planSolicitado" ng-options="option.name for option in comboData.options"> 
 
     <option value="">---Seleccione su plan Solicitado---</option> 
 
     </select> 
 
     <br> 
 
     <br> 
 
     <button ng-click="reset()">Consultar</button> 
 
     <button ng-click="reset()">Limpiar</button> 
 
    </form> 
 
    <p>form = {{riskData}}, "planAnterior": {{comboData.planAnterior.id}}, "planSolicitado": {{comboData.planSolicitado.id}}</p> 
 
    </div> 
 
</body>

、何PlanSolicitadoがやるべきことはPlanAnteriorで選択された1への最初の1からすべてのオプションを無効にすることです。

私はこのように、以下のフィルタ機能でselectタグまたはオプションタグのいずれかでNG-disabled属性を使用して試してみました:

ng-disabled="comboData.planAnterior.id | selectedPlan:option.id" 

しかし、それは動作しません。機能に応じて、すべてを無効にするか、無効にします。

私が現在行っている行の後にこれを達成する方法はありますか?必要に応じて、私は次の中から知識を収集されていた場合には

https://code.angularjs.org/1.4.8/docs/api/ng/directive/ngDisabled https://code.angularjs.org/1.4.8/docs/api/ng/directive/ngOptions

答えて

3

私はそれを正しく理解している場合は、以前のものから選択された値を削除するには、フィルタを使用することができます。ここで

<select name="PlanSolicitado" id="PlanSolicitado" ng-model="comboData.planSolicitado" ng-options="option.name for option in comboData.options | filter: {id: '!' + comboData.planAnterior.id}"> 

は完全に動作スニペットです:

var app = angular.module('riskQueries', []); 
 

 
    app.controller('cuitCtrl', function($scope) { 
 
    $scope.defaultCuit = { 
 
     cuit: "99-99999999-9" 
 
    }; 
 
    $scope.reset = function() { 
 
     $scope.riskData = angular.copy($scope.defaultCuit); 
 
    }; 
 
    $scope.reset(); 
 
    $scope.comboData = { 
 
     planAnterior: null, 
 
     planSolicitado: null, 
 
     options: [{ 
 
     id: "0", 
 
     name: "No tengo un plan" 
 
     }, { 
 
     id: "1", 
 
     name: "Plan Básico" 
 
     }, { 
 
     id: "2", 
 
     name: "Plan Joven" 
 
     }, { 
 
     id: "3", 
 
     name: "Plan Famliar" 
 
     }, { 
 
     id: "4", 
 
     name: "Plan Cobertura Completa" 
 
     }, { 
 
     id: "5", 
 
     name: "Plan Plus" 
 
     }], 
 
    }; 
 
    }); 
 

 

 
    app.filter('selectedPlan', function() { 
 
    return function(planAnterior, planSolicitado) { 
 
     planAnterior == planSolicitado; 
 
    }; 
 
    });
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 

 
<body> 
 
    <div ng-app="riskQueries" ng-controller="cuitCtrl"> 
 
    <form name="BPMForm"> 
 
     <label for="Cuit">CUIT/CUIL:</label> 
 
     <input name="Cuit" type="text" ng-model="riskData.cuit"> 
 
     <br> 
 
     <br> 
 
     <label for="PlanAnterior">Plan Actual:</label> 
 
     <select name="PlanAnterior" id="PlanAnterior" ng-model="comboData.planAnterior" ng-options="option.name for option in comboData.options"> 
 
     <option value="">---Seleccione su plan Actual---</option> 
 
     </select> 
 
     <br> 
 
     <br> 
 
     <label for="PlanSolicitado">Plan Solicitado:</label> 
 
     <select name="PlanSolicitado" id="PlanSolicitado" ng-model="comboData.planSolicitado" ng-options="option.name for option in comboData.options | filter: {id: '!' + comboData.planAnterior.id}"> 
 
     <option value="">---Seleccione su plan Solicitado---</option> 
 
     </select> 
 
     <br> 
 
     <br> 
 
     <button ng-click="reset()">Consultar</button> 
 
     <button ng-click="reset()">Limpiar</button> 
 
    </form> 
 
    <p>form = {{riskData}}, "planAnterior": {{comboData.planAnterior.id}}, "planSolicitado": {{comboData.planSolicitado.id}}</p> 
 
    </div> 
 
</body>

+0

こんにちは!ありがとう、それは私が必要なものです!簡単な質問:リストから削除するのではなく、無効にする方法はありますか?ちょうどそれについて興味がある。 –

関連する問題