ng-repeat and repeated values

0

I have the following code:

var options = ["option1", "option2", "option3"]

<div ng-repeat="fir in getTimes(3)">
<select ng-model="spAnswer[$index].importance">
    <option ng-repeat="option in options" value="{{option}}">
        {{option}}
    </option>
</select>
</div>

If I have 3 selects: if in the second select I have selected the option1 , the first and the third should show me option2 and option3 to be able to choose.

    
asked by sirdaiz 25.01.2017 в 11:31
source

3 answers

1

I can think of something to achieve what you want in a simple way. If you create a function with a custom filter, you could filter the options that have not been selected. Here is an example so you can better understand what I have tried to explain:

var app = angular.module("myApp", []);

app.controller("myController", ["$scope", function ($scope) {

  $scope.selects = ["", "", ""];

  $scope.options = ["option1", "option2", "option3"];

  $scope.filterOpts = function (selindex) {
    return function (item) {
      var ind = $scope.selects.indexOf(item);
      return ind == selindex || ind < 0;
    }
  };

}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myController">
    <select ng-repeat="(ind, val) in [1, 2, 3]" ng-model="selects[ind]">
        <option value="">Selecciona una</option>
        <option ng-repeat="item in options | filter:filterOpts(ind)" value="{{item}}">{{item}}</option>
    </select>
  </div>
</div>
    
answered by 23.03.2017 в 12:20
0

This may be a solution, html:

<div ng-controller="MiControl">
  <div ng-repeat="fir in getTimes(3)">
    <select 
     ng-model="spAnswer[$index].importance"
     ng-options="op for op in optionsAux[$index]"></select>
  </div>
</div>

your controller:

app.controller('MiControl',['$scope', function($scope){

  $scope.spAnswer = [{},{},{}];
  $scope.options = ["option1", "option2", "option3"];
  $scope.optionsAux =  generateList($scope.options);

  $scope.getTimes = function(n){
    var a = [];
    for(var p = 0; p < n; p++){
        a.push(p);
    }
    return a;
  }
  //Esta función crea un arreglo de arreglos disminuyendo uno
  // por cada iteración.
  function generateList(array){
    var mainArray = [];

    for(var p = 0; p < array.length; p++){
       var auxA = [];
       for(var x = p; x < array.length; x++){
         auxA.push(array[x]);
       }
       mainArray.push(auxA);
    } 
    return mainArray;
  }
}]);
    
answered by 30.01.2017 в 19:07
0

Instead of using

<option ng-repeat="option in options" value="{{option}}">

Create a function that returns the filtered options. In the controller:

function getOptions(index){
// Si index es mayor que 0, es el segundo o tercer select y mira qué valor tiene el anterior.
  if(index > 0){
    var excluido = spAnswer[index-1].importance;
    // Devuelve todas las opciones menos la excluida.
    return options.filter(function(o){
      return o !== excluido;
    });
  }else{
    // Es el primer select, devuelve todas las opciones.
    return options;
  }
}

Then, call the function that generates the options in the ngrepeat:

<option ng-repeat="option in getOptions($index)" value="{{option}}">
    
answered by 25.01.2017 в 13:11