减少开关语句中的数组（AngularJS）

Question

很抱歉这篇文章标题中的肤浅描述，但我会在本文中更好地解释它。但是，在我的 Ctrl 中，我使用了 switch-statement 什么是大的。有点大，我正在寻找一种解决方案来最小化它或更灵活。

一个简短的描述它是如何工作的。目前该视图包含 6 个复选框。所有复选框在 ngClick 指令中都有一个方法 choose(r.val)。因此，当用户确实与复选框交互时，choose-方法会调用 switch 语句。为什么？检查单击了哪个复选框。具有该值的相应案例被执行。所有复选框都使用数组$scope.tableOptions = [...]，这意味着在视图中是一个 ngRepeat 指令，定义为显示所选表。

代码如下：

$scope.choose = function (value) {
   switch (value) {
      case 1:
          $scope.changeDate = function (selDate) {
              CrudService.getArticle(selDate).$promise.then(
                   function (response) {
                      $scope.repos = response;
                   },
                   function (err) {
                      $log.info('error:', err);
                   });
          }

          $scope.tableOptions = [
               { columnTitle: 'Datum' },
               { columnTitle: 'ArtNr' },
               { columnTitle: 'Description' },
               { columnTitle: 'Price' }
          ];

          $scope.rowOptions = [
               { rowTitle: 'datum' },
               { rowTitle: 'artnr' },
               { rowTitle: 'descr' },
               { rowTitle: 'price' }
          ];
          break;
      case 2:
          $scope.changeName = function (selName) {
               CrudService.getNames(selName).$promise.then(
                   function (response) {
                      $scope.repos = response;
                   },
                   function (err) {
                      $log.info('error:', err);
                   });
          }

          $scope.tableOptions = [
               { columnTitle: 'Datum' },
               { columnTitle: 'Firstname' },
               { columnTitle: 'Lastname' },
               { columnTitle: 'Address' },
               { columnTitle: 'Age' }
          ];

          $scope.rowOptions = [
               { rowTitle: 'Datum' },
               { rowTitle: 'fname' },
               { rowTitle: 'lname' },
               { rowTitle: 'address' },
               { rowTitle: 'age' }
          ];
          break;
      case 3:
          ... // and so on..

为了更好地想象，我添加了这个例子的视图：

<div class="table-responsive">
   <table class="table table-bordered table-hover">
      <thead>
         <tr>
           <th ng-repeat="tblOpt in tableOptions">
              {{ tblOpt.columnTitle }}
           </th>
         </tr>
      </thead>
      <tbody>
         <tr ng-repeat="r in repos">
           <td ng-repeat="row in rowOptions">
              {{ r[row.rowTitle] }}
           </td>
         </tr>
      </tbody>
   </table>
</div>

我的想法是将数组相互嵌套。但也许对此有更好的解决方案。如何更智能地定义数组？

Answer 1

不确定这是否正是您想要达到的目的，但这是简化代码并使其更加模块化的一种方法。是将您的功能分成四个功能中的三个而不是一个。例如，您可以有一个名为 build table options 的函数和一个名为 build row options 的函数，这将使您的代码更加灵活、模块化并且更易于测试

这是一个例子，你也可以排除数据调用部分，但是没有看到你的其余代码，我不能给出一个很好的例子

$scope.choose = function (value) {
   switch (value) {
      case 1:
          $scope.changeDate = function (selDate) {
              CrudService.getArticle(selDate).$promise.then(
                   function (response) {
                      $scope.repos = response;
                   },
                   function (err) {
                      $log.info('error:', err);
                   });
          }

           $scope.buildTableOptions(['Datum' ,  'ArtNr' , 'Description' , 'Price']);
           $scope.buildRowOptions([ 'datum','artnr' ,'descr' ,'price']);
          break;
      case 2:
          $scope.changeName = function (selName) {
               CrudService.getNames(selName).$promise.then(
                   function (response) {
                      $scope.repos = response;
                   },
                   function (err) {
                      $log.info('error:', err);
                   });
          }

          $scope.buildTableOptions(['Datum', 'Firstname', 'Lastname', 'Address', 'Age']);
          $scope.buildRowOptions(['Datum' , 'fname','lname','address','age']);
          break;

   } 


  $scope.buildOptions = function(type, names){
      var options = [];
      names.forEach(function(el){

          var obj = {}
          obj[type] = el;
          options.push(obj)   

      }); 

      return options;        

  };


  $scope.buildTableOptions = function(options){

    $scope.rowOptions = $scope.buildOptions('columnTitle', options)

  };

   $scope.buildRowOptions = function(options){

    $scope.rowOptions = $scope.buildOptions('rowTitle', options)

  };