Редактируйте много одноименных изолированных переменных одновременно в Angularjs

0

У меня есть стол. Каждая ячейка может удерживать свое значение в виде строки или шаблона редактирования на месте для этого типа данных.

Я делаю одно или другое на основе значения переменной "ttt" этой ячейки таблицы. Если ttt = true, он отображает шаблон редактирования, если false, он отображает значение как строку.

Как настроить вещи, вы можете переключаться между истиной и ложью определенной ячейки каждый раз, когда вы дважды щелкаете по ней.

Я хочу иметь также кнопку в верхней части страницы, которая одновременно переключает все переменные "ttt" между true или false для всех ячеек таблицы.

Каков наилучший способ сделать это так, как у меня есть вещи.

Вот шаблон таблицы:

<script type="text/ng-template" id="editabletable">
  <div ng-controller="listeditorController" cg-busy="{promise:myPromise, message:'&nbsp;'}">

      <div tasty-table bind-resource-callback="getResource" bind-init="init" bind-filters="filterBy">
        <div class="table-responsive" style="width:100%;">

          <table class="superResponsive" adapt-table style="width:{{theWidth}};margin:0 auto;">


              <thead>
              <!-- <thead tasty-thead bind-not-sort-by="notSortBy"></thead> -->
              <tr>
                <th style="max-width:{{columnWidth}}px;" ng-repeat="attobj in rows[0].class_attributes()">
                  {{ attobj.label }}
                </th>
              </tr>
              <tr>
                <td style="max-width:{{columnWidth}}px;" ng-repeat="attobj in header.columns track by $index">
                  <input ng-if="attobj.filterable" type="text" class="form-control input-sm" ng-model="filterBy[attobj.filterkey || attobj.key]" ng-model-options="{ debounce: 2000 }" />
                </td>
              </tr>
              </thead>
              <tbody>

              <tr ng-repeat="dbo in rows">
                <td style="max-width:{{columnWidth}}px;" ng-repeat="attobj in header.columns" ng-dblclick="ttt=!ttt">

                <div>
                  <form name="theForm" novalidate>
                  <div ng-if="ttt" ng-init="attobj = attobj.attobj" ng-include src="getAttValuesEditorTemplate(dbo, attobj)">
                  </div>
                  </form>
                  <div ng-if="!ttt" ng-repeat="v in dbo.get4(attobj.key) track by $index">
                    <p ng-if="v.cid">{{ v.displayName() }}</p>
                    <p ng-if="!v.cid">{{ v }}</p>
                  </div>
                </div>

                </td>
              </tr>

            </tbody>
          </table>

        </div>
        <div tasty-pagination bind-list-items-per-page="listItemsPerPage" bind-items-per-page="itemsPerPage" bind-template-url="'/templates/table/pagination.html'"></div>
      </div>

  </div>
</script>

Изображение 174551Изображение 174551

  • 0
    Многочисленные способы сделать это ... что вы пробовали?
  • 0
    Ну, я думал, что мог бы установить «ttt» как переменную области видимости в контроллере всей таблицы, но затем я бы пожертвовал отдельным переключателем ячейка за ячейкой, поэтому я не был уверен, как повлиять на все переменные ttt всех ячеек в в то же время, не унижая то, что я уже настроил
Показать ещё 10 комментариев
Теги:
angularjs-scope
angularjs-ng-repeat

1 ответ

0
Лучший ответ

Хорошо, решение, которое я придумал, довольно просто, но SLOW.

Я добавил контроллер на уровне таблицы, который определяет переменную scope "editGird", определенную при загрузке как "false".

При щелчке по кнопке "Edit gird" переменная scope "editGird" переключает между true и false.

Если установлено значение true, ячейка отображается следующим образом:

<td ng-if="editGird==true" style="max-width:{{columnWidth}}px;" ng-repeat="attobj in header.columns">
        <div>
          <form name="theForm" novalidate>
            <div ng-init="attobj = attobj.attobj" ng-include src="getAttValuesEditorTemplate(dbo, attobj)">
            </div>
          </form>
        </div>
</td>

Если editGird == false:

<td ng-if="editGird==false" style="max-width:{{columnWidth}}px;" ng-repeat="attobj in header.columns" ng-dblclick="ttt=!ttt">
                <div>
                  <form name="theForm" novalidate>
                  <div ng-if="ttt" ng-init="attobj = attobj.attobj" ng-include src="getAttValuesEditorTemplate(dbo, attobj)">
                  </div>
                  </form>
                  <div ng-if="!ttt" ng-repeat="v in dbo.get4(attobj.key) track by $index">
                    <p ng-if="v.cid">{{ v.displayName() }}</p>
                    <p ng-if="!v.cid">{{ v }}</p>
                  </div>
                </div>
</td>

контроллер:

app.controller('editGirdController', ['$scope',
    function ($scope) {     

      $scope.editGird= false;
      $scope.onOff = function() {
          if ($scope.editGird == true){
            $scope.editGird = false;
            $scope.editGirdColor ='#0887A7';
          } else{
            $scope.editGird = true;
            $scope.editGirdColor ='lightGreen';
          }
      console.log($scope.editGird); 
      console.log($scope);
      }

    }
]);

Но это очень медленно! На таблицах с 25-35 столбцами требуется 1 секунда для каждых 5 строк для рендеринга !!! Как я могу сделать это более эффективным???

Изображение 174551

Поделиться
  • 0
    изменил нг-если для нг-шоу .... работает как шарм!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню