javascript - 在 ng-repeat 中使用选择值

标签 javascript angularjs angularjs-ng-repeat

现在我必须对所选值使用 limitTo 过滤器,但我真正想要的是使用所选值作为 ng-repeat 应该运行的次数。但该值是一个对象,而 ng-repeat 需要一个数组。

所以理论上,这是可行的。但最终生成该表所需的所有信息。

更新:代码有效,但我不想自己声明范围[1,2,3,4,5,6](然后应用过滤器)我想使用value factorSelection.value 是一个对象,但它需要一个数组。

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>

最佳答案

通过其他 channel (Google+) 获得答案,将其添加为更新代码的答案。

添加了获取长度并将这些值作为选项返回的函数。

这仍然会与不同的输入字段发生一些冲突,但这是我可以在完成后修复和更新的东西。

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>
  

关于javascript - 在 ng-repeat 中使用选择值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30483646/

相关文章:

javascript - 动态加载新内容后 jquery 触发器不起作用

javascript - react 应用程序 : Start API server with React server

javascript - onblur 事件包含 if 语句和函数调用

javascript - json 数据上的 Angular js 中的 Slick Carousel 不起作用

angularjs - 在Angularjs中,如何在删除行后更新表数据

angularjs - React 等价于 ng-repeat

javascript - AngularJS 使用 RowSpan 在表中生成分组数据

javascript - 按日期过滤 Angular 排序

angularjs - 获取 JSON 格式的 Azure Blob 数据

javascript - 如何绑定(bind)由 AngularJS 中的函数构造函数创建的对象