2016-05-17 86 views
2

我一直在努力与这个相当多,我虽然会更容易实现。使用Angular.JS禁用选择取决于前一个的内容

我目前正在建立一个简单的输入文本区域和两个组合框。 这两个组合框表示一种合约,第一个框选择应限制第二个框中的可用选项。

这里的片段:

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选择禁用每个选项。

我已经使用了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

嗨!谢谢,那就是我需要的!只是一个简单的问题:有没有办法只是禁用它,而不是从列表中删除它?只是好奇而已。 –

相关问题