0

Les presento mi problema: Tengo un formulario dinamico, este tiene pues varios campos y entre ellos tengo un select que tiene las opciones: capitulo, subcapitulo, nivel 1, nivel 2, nivel 3 y nivel 4, cada vez que selecciono una opcion de este select se crea un nuevo formulario abajo del anterior que es exactamente igual y asi sucesivamente.

Lo que ocupo es que al seleccionar una opcion de mi select y se cree otro formulario, que en este siguiente formulario vengan unicamente ciertas opciones basadas en la anterior ya seleccionada, por ejemplo: que al seleccionar Capitulo en el siguiente select solo te de de opciones Subcapitulo y Nivel 1, luego si seleccionas Nivel 2 solo te de de opcion seleccionar Nivel 3.

Les adjunto el codigo que llevo, TODO ESTO SOLO CON 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>
1
  • 1
    Bienvenido a SOes JPMonge. Podrías editar la pregunta y agregar un fragmento de código con lo que haz hecho. De la forma que esta escrita la pregunta es my difícil entender lo que quieres.
    – devconcept
    el 23 jun. 2016 a las 19:19

1 respuesta 1

1

Para esto necesitas un filtro customizado que te filtre el arreglo de opciones basandose en la opción anterior.

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>

6
  • Esa solucion no me sirve tanto ya que lo que ocupo es que por ejemplo cada opcion tenga asignada otras opciones por ejemplo: siempre que seleccione nivel 1 en el siguiente form solo me de a escoger nivel 2 y tu respuesta solo pues restando las opciones disponibles
    – JPMonge
    el 27 jun. 2016 a las 17:43
  • @JPMonge Deberías editar la pregunta y dar más detalles de que es exactamente lo que quieres lograr y que es lo que tienes hecho ya. Con los pocos elementos que das en tu pregunta es dificil escribir una respuesta que solucione tu problema.
    – devconcept
    el 27 jun. 2016 a las 17:58
  • Listo ya la edite :)
    – JPMonge
    el 27 jun. 2016 a las 18:03
  • @JPMonge Revisa mi respuesta. Ya la edité.
    – devconcept
    el 27 jun. 2016 a las 20:44
  • Wow muchisimas gracias es exacto a lo que buscaba!!
    – JPMonge
    el 27 jun. 2016 a las 21:48

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.