Question

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

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

以下是片段：

＆＃13;

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;
    };
  });

＆＃13;

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

＆＃13;

那么，PlanSolicitado应该做的是禁用从第一个选项到PlanAnterior中选择的每个选项。

我尝试在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

Answer 1

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

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

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

1 个答案: