Show and hide the options of my select with angularJS

Question

Show and hide the options of my select with angularJS

Navigation

#1 by (1 votes)

0

I present my problem: I have a dynamic form, this has several fields and among them I have a selection that has the options: chapter, subchapter, level 1, level 2, level 3 and level 4, every time I select an option of this select a new one is created form below the previous one that is exactly the same and so on.

What I occupy is that when I select an option of my select and another form is created, in this next form only certain options based on the previously selected one come, for example: that when selecting Chapter in the next one select only you of options Subchapter and Level 1, then if you select Level 2 you only of option to select Level 3.

I enclose the code that I have, ALL THIS ONLY WITH ANGULARJS

var app = angular.module('angularjs-starter', []); 
app.controller('MainCtrl', ['$scope', function($scope) {

$scope.choices = [{id: 'choice1'}];

$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({id:'choice'+newItemNo});
};

$scope.removeChoice = function(index) {   
$scope.choices.splice(index, 1);
};

var initialOptions = ['Capitulo', 'Subcapitulo', 'Nivel 1', 'Nivel 2',     'Nivel 3', 'Nivel 4'];
$scope.options = initialOptions;
$scope.selectedOption = $scope.options[0];



}]);

<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<fieldset class="form-group"  data-ng-repeat="choice in choices">
<form name="myForm">
<select ng-model="selectedOption" ng-options="o for o in options" > ng-change="addNewChoice()">
</select>

 <input type="number" ng-model="choice.clave" name="" placeholder="Ingresa > la clave">

      <input type="text" ng-model="choice.concepto" name="" placeholder="Ingresa el concepto">

      <input type="text" ng-model="choice.unidad" name="" placeholder="Ingresa la unidad" min="0">

      <input type="number" ng-model="choice.cantidad" name="" placeholder="Ingresa la cantidad" min="0">

      <input type="number" ng-model="choice.punitario" name="" placeholder="Precio unitario" min="0" ng-click="showme=true">

<input type="number" ng-model="choice.importe" name="" placeholder="Importe">

<button class="remove btn btn-danger" ng-show="$last" ng-click="removeChoice($index)">Eliminar</button>
</fieldset>
</form>
<button class="addfields btn btn-primary" ng-click="addNewChoice()">Agregar</button>


</div>

javascript html5 angularjs

asked by JPMonge 23.06.2016 в 21:14

source

1 answer

I want to validate with ajax and json in Django, a field if it already exists before submitting? calculate values of a dynamic table

score 1 · Answer 1

For this you need a customized filter that filter the arrangement of options based on the previous option.

var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', ['$scope',
    function($scope) {

      $scope.choices = [{
        id: 'choice1'
      }];

      $scope.addNewChoice = function() {
        var newItemNo = $scope.choices.length + 1;
        $scope.choices.push({
          id: 'choice' + newItemNo
        });
      };

      $scope.removeChoice = function(index) {
        $scope.choices.splice(index, 1);
      };

      var initialOptions = ['Capitulo', 'Subcapitulo', 'Nivel 1', 'Nivel 2', 'Nivel 3', 'Nivel 4'];
      $scope.options = initialOptions;
      $scope.selectedOption = $scope.options[0];
    }
  ])
  .filter('remaining', function() {
    return function(input, choice) {
      return input.filter(function(item) {
        // Aqui comparas cada opción con cada item le las opciones
        // y retornas true o false si lo quieres incluir o no
        var allowedItems;
        switch (choice) {
          case 'Capitulo':
            allowedItems = ['Subcapitulo', 'Nivel 1'];
            break;
          case 'Nivel 2':
            allowedItems = ['Nivel 3']
            break;
          case 'Nivel 3':
            allowedItems = ['Nivel 4']
            break;
          default:
            return true;
        }
        return allowedItems.indexOf(item) !== -1;
      });
    }
  });

form select {
  display: block;
  width: 200px;
  margin: 10px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
  <fieldset class="form-group" data-ng-repeat="choice in choices">
    <form name="myForm">
      <select ng-model="choice.selected" ng-options="o for o in options | remaining : choices[$index - 1].selected">
        <option>Seleccione</option>
      </select>
      <input type="number" ng-model="choice.clave" name="" placeholder="Ingresa > la clave">
      <input type="text" ng-model="choice.concepto" name="" placeholder="Ingresa el concepto">
      <input type="text" ng-model="choice.unidad" name="" placeholder="Ingresa la unidad" min="0">
      <input type="number" ng-model="choice.cantidad" name="" placeholder="Ingresa la cantidad" min="0">
      <input type="number" ng-model="choice.punitario" name="" placeholder="Precio unitario" min="0" ng-click="showme=true">
      <input type="number" ng-model="choice.importe" name="" placeholder="Importe">
      <button class="remove btn btn-danger" ng-show="$last" ng-click="removeChoice($index)">Eliminar</button>
    </form>
  </fieldset>
  <button class="addfields btn btn-primary" ng-click="addNewChoice()">Agregar</button>
</div>