根据使用 Angular.JS 的前一个内容的内容禁用选择答案

【问题标题】：Disabling a select depending on the content of a previous one with Angular.JS根据使用 Angular.JS 的前一个内容的内容禁用选择
【发布时间】：2016-09-13 23:57:08
【问题描述】：

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

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

这是sn-p：

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

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

如果我理解正确，您可以使用过滤器从上一个中删除选定的值：

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

这里是完整的工作 sn-p：

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>

【讨论】：

嗨！谢谢，正是我需要的！只是一个简单的问题：有没有办法只是禁用它而不是从列表中删除它？只是好奇而已。