gpt4 book ai didi

javascript - 使用 Angular.JS 根据前一个内容禁用选择

转载 作者:太空宇宙 更新时间:2023-11-04 16:07:09 24 4
gpt4 key购买 nike

我一直在努力解决这个问题,但我认为它更容易实现。

我目前正在构建一个带有输入文本区域和两个组合框的简单表单。这两个组合框代表一种契约(Contract),第一个框的选择应限制第二个框的可用选项。

这是片段:

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

最佳答案

如果我没理解错的话,你可以使用过滤器从之前的值中删除所选值:

<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>

关于javascript - 使用 Angular.JS 根据前一个内容禁用选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37283651/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com