javascript - 减少 switch 语句中的数组 (AngularJS)

Question

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

简短描述其工作原理。目前该 View 包含 6 个复选框。所有复选框在 ngClick 指令中都有一个方法 choose(r.val)。因此，当用户与复选框交互时，choose 方法会调用 switch 语句。为什么？检查单击了哪个复选框。具有该值的相应情况将被执行。所有复选框都会使用数组 $scope.tableOptions = [...]，这意味着 View 中定义了一个 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..

为了更好地想象它，我添加了此示例的 View :

<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

不确定这是否正是您想要的，但这是简化代码并使其更加模块化的一种方法。是将你的函数分成四个函数中的三个而不是一个。例如，您可以有一个名为构建表选项的函数和一个名为构建行选项的函数，这将使您的代码更加灵活、模块化并且更易于测试

这是一个例子，您也可以分解出数据调用部分，但如果没有看到其余代码，我无法给出一个很好的例子

$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)

  };