CODEWITHSUNDEEP
javascripthtmlangularjs
bassco_dp
bassco_dp

Reputation: 29

Disabling a select depending on the content of a previous one with Angular.JS

I have been struggling with this one quite a bit, I though it would be more easy to achieve.

I am currently building a simple form with an input text area and two combo boxes. Those two combo boxes represent a type of contract, and the first box selection should limit the available options in the second one.

Here's the snippet:

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>

So, what PlanSolicitado should be doing is to disable every option from the first one to the one selected in PlanAnterior.

I have tried using the ng-disabled attribute either on the select tag or in an option tag with the filter function below, like this:

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

But it doesn't work. Depending on the function, it disables everything or nothing at all.

Are there any ways to achieve this following the line I am currently on?

In case of needed, I have been gathering knowledge from the following:

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

Upvotes: 2

Views: 74

Answers (1)

Fedaykin
Fedaykin

Reputation: 4552

If I understood it correctly, you can use a filter to remove the selected value from the previous one:

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

Here is the full working snippet:

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>

Upvotes: 3

Related Questions