Question

对于这篇文章标题中的肤浅描述感到抱歉，但我会在本文中更好地解释。但是，在我的Ctrl中我使用switch - 语句是什么大。有点大，我正在寻找一种解决方案，以尽量减少它或使其更灵活。

简短说明如何运作。目前该视图包含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选项的函数和一个名为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)

  };

减少switch语句中的数组（AngularJS）

1 个答案: