Using select value in ng-repeat

Question

Right now I have to use a limitTo filter with the selected value, but what I really want is to use the selected value as the amount of times the ng-repeat should run. But that value is an Object while ng-repeat expects an Array.

So in theory, this works. But eventually all the information need to generate that table.

Update: The code works, but instead of having to declare the range myself [1,2,3,4,5,6] (and applying a filter afterwards) I want to use the value factorSelection.value which is an Object while it expects an Array.

var app = angular.module('application', []);

app.controller('mainCtrl', ['$scope', function($scope) {
  $scope.factors = [
    {value: '1', name: '1 factor'},
    {value: '2', name: '2 factors'},
    {value: '3', name: '3 factors'},
    {value: '4', name: '4 factors'},
    {value: '5', name: '5 factors'}
  ];
  
  $scope.states = [
    {value: '1', name: '1 state'},
    {value: '2', name: '2 states'},
    {value: '3', name: '3 states'},
    {value: '4', name: '4 states'},
    {value: '5', name: '5 states'}   
  ];
}]);

.item {
  padding: 10px;
  border-bottom: 1px solid #999;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="application">

  <div ng-controller="mainCtrl">
   <select ng-model="factorSelection" ng-options="factor.name for factor in factors">
     <option value="">-- choose amount of factors --</option>
   </select>    
    
    <div ng-repeat="factor in [1,2,3,4,5,6] | limitTo: factorSelection.value">
      <div class="item">
        factor {{ factor }}
        <select ng-model="stateSelection" ng-options="state.name for state in states">
          <option value="">-- choose amount of states --</option>
        </select>
        
        <div ng-repeat="state in [1,2,3,4,5,6,7,8,9,10] | limitTo: stateSelection.value">
          <input type="text" ng-model="state" placeholder="" />
          {{ state }}
        </div>
      </div>
    </div>
   <table>
      <thead>
        <tr>
          <th ng-repeat="factor in [1,2,3,4,5,6] | limitTo: factorSelection.value"> {{ factor }}</th>
        </tr>
      </thead>
     
     <tbody>
       <tr ng-repeat="factor in [1,2,3,4,5,6] | limitTo: factorSelection.value">
         <td ng-repeat="factor in [1,2,3,4,5,6] | limitTo: factorSelection.value"> 
           td {{ factor }}
         </td>
       </tr>
     </tbody>
    </table>
  </div>

@Pureferret that is almost the same approach only using a custom filter. I mean this kind of works. But i would like to have something more like: `ng-repeat="item in {{selectedValue}}"`. Something like that. — richardj, May 27 '15 at 13:53

score 0 · Answer 1 · answered May 27 '15 at 14:18

Got an answer through another channel (Google+), will add it as an answer with updated code.

Added are the functions for getting the length and returning those values as options.

This still ends up with some conflict with the different input fields, but that is something that I can work on to fix and update once that is done.

var app = angular.module('application', []);

app.controller('mainCtrl', ['$scope', function($scope) {
  $scope.factors = [
    {value: '1', name: '1 factor'},
    {value: '2', name: '2 factors'},
    {value: '3', name: '3 factors'},
    {value: '4', name: '4 factors'},
    {value: '5', name: '5 factors'}
  ];
  
  $scope.states = [
    {value: '1', name: '1 state'},
    {value: '2', name: '2 states'},
    {value: '3', name: '3 states'},
    {value: '4', name: '4 states'},
    {value: '5', name: '5 states'}   
  ];
  
  /*
  * Get factor options 
  */
  $scope.getFactors = function(len){
   return $scope.getOptions(len, $scope.factors);
  }
  /*
  * Get state options
  */
  $scope.getStates = function(len){
    return $scope.getOptions(len, $scope.states);
  }
  
  /*
  * 
  */
  $scope.getOptions = function(len, options){
    if (len && len <= options.length ){
       return options.slice(0, len);
    }
  }
}]);

.item {
  padding: 10px;
  border-bottom: 1px solid #999;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="application">

  <div ng-controller="mainCtrl">
   <select ng-model="factorSelection" ng-options="factor.name for factor in factors">
     <option value="">-- choose amount of factors --</option>
   </select>    
    
    <div ng-repeat="factor in getFactors(factorSelection.value)">
      <div class="item">
        factor {{ factor.value }}
        <select ng-model="stateSelection" ng-options="state.name for state in states">
          <option value="">-- choose amount of states --</option>
        </select>
        
        <div ng-repeat="state in getStates(stateSelection.value)" >
          <input type="text" ng-model="state.value" placeholder="" />
          {{ state.value }}
        </div>
      </div>
    </div>
   <table>
      <thead>
        <tr>
          <th ng-repeat="factor in [1,2,3,4,5,6] | limitTo: factorSelection.value"> {{ factor }}</th>
        </tr>
      </thead>
     
     <tbody>
       <tr ng-repeat="factor in [1,2,3,4,5,6] | limitTo: factorSelection.value">
         <td ng-repeat="factor in [1,2,3,4,5,6] | limitTo: factorSelection.value"> 
           td {{ factor }}
         </td>
       </tr>
     </tbody>
    </table>
  </div>

Using select value in ng-repeat

1 Answers1