как я могу сохранить некоторые значения в переменной ngshow и ng hide, чтобы $digest не инициализировал их снова и снова в angularjs?

Я показываю некоторые данные в веб-приложении, которые я получаю из базы данных SQL с помощью службы http. Я хочу иметь возможность изменять информацию об этих данных в той же таблице, где отображаются данные. Я использую angularjs и использую директивы ng-show и ng-hide на столе. Здесь я показываю ту часть кода, о которой говорю.

    <table>
    <tr>
        <td><font size = 4>Servicio:    </font> </td>
        <td>  </td>
        <td>
            <select class="col-sm-12" name="repeatSelect" id="repeatSelect" ng-model="currentItem.ServicioId">
                <option ng-repeat="option in items.Servicio" value="{{option.Id}}"> {{option.Nombre}}</option>
            </select>
        </td>
    </tr>
</table>


<h4>Cliente:  {{getNameC(currentItem.ServicioId)}}</h4>
<br />
<button class="btn btn-primary" ng-click="editOrCreate()">Nuevo</button>
<button class="btn btn-primary" ng-click="list()">Actualizar</button>
     <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Cantidad</th>
                <th>Tipo Concepto</th>
                <th>Descripción</th>
                <th>Precio Unitario</th>
                <th></th>
            </tr>
        </thead>
        <tbody>             

            <tr ng-repeat="item in itemsSC">
                <td>
                    <div ng-hide="editingData[item.Id]">{{item.Cantidad}}</div>
                    <div ng-show="editingData[item.Id]"><input ng-model="currentItem.Cantidad" /></div>
                </td>
                <td>
                    <div ng-hide="editingData[item.Id]">{{getName(item.ServicioConceptoTipoId)}}</div>
                    <div ng-show="editingData[item.Id]">
                       <select name="repeatSelect" id="repeatSelect" ng-model="currentItem.ServicioConceptoTipoId">
                            <option ng-repeat="option in items.ServicioConceptoTipo" value="{{option.Id}}"> {{option.Nombre}}</option>
                        </select>
                    </div>
                </td>
                <td>
                    <div ng-hide="editingData[item.Id]">{{item.Descripcion}}</div>
                    <div ng-show="editingData[item.Id]"><input type="text" ng-model="currentItem.Descripcion" /></div>
                </td>
                <td>
                    <div ng-hide="editingData[item.Id]">{{item.PrecioUnitario}}</div>
                    <div ng-show="editingData[item.Id]"><input ng-model="currentItem.PrecioUnitario" /></div>
                </td>
                <td>
                    <button class="btn btn-xs btn-primary" ng-hide="editingData[item.Id]" ng-click="editOrCreate(item)">Modificar</button>
                    <button class="btn btn-xs btn-primary" ng-show="editingData[item.Id]" ng-click="saveEdit(currentItem,0)">Actualizar</button>
                    <button class="btn btn-xs btn-primary" ng-hide="viewField" ng-click="delete(item)">Eliminar</button>
                </td>
            </tr>
        </tbody>
        <tfoot id="total">
            <tr>
                <td colspan="3" class="text-right">Total:</td>
                <td class="text-right">
                    {{total(currentItem.ServicioId) | currency}}
                </td>
            </tr>
        </tfoot>
    </table>

На моем контроллере я использую массивы объектов для получения информации из баз данных, и я использую зеркальный массив для хранения логических значений данных, отображаемых в таблице, поэтому в зависимости от логического значения таблицы отображают данные или получают ввод чтобы пользователь мог изменить данные.

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

Однако, когда я нажимаю кнопку, чтобы изменить статус объекта ng-hide или ng-show с именем editData, контроллеры изменяют его, но $digest запускает все остальные функции, связанные с привязками представления, и возвращает логическое значение. массив объектов к его начальным значениям.

Я не смог найти способ обойти этот нормальный рабочий способ $digest и $watches, поэтому мой объект $editingData не был изменен до его начальных значений. Здесь я показываю код контроллера, связанного с этим.

angular.module("App")

 .controller("ConceptoCtrl", function ($scope, $http, $resource, serviciosConceptoFactory, serviciosConceptoTipoFactory, serviciosFactory, clientesFactory) {

  $scope.list = function () {
       $scope.items = serviciosConceptoFactory.query();

       $scope.itemsT = serviciosConceptoTipoFactory.query();
       $scope.items.ServicioConceptoTipo = $scope.itemsT;

       $scope.itemsS = serviciosFactory.query();
       $scope.items.Servicio = $scope.itemsS;

       $scope.itemsC = clientesFactory.query();
       $scope.itemsS.Cliente = $scope.itemsC;
    }

    //some other functions

     $scope.editingData = {};  

     $scope.getitemsSC = function (item) {
        $scope.itemsSC = [];
        for (var j = 0; j < $scope.items.length; j++) {
           if ($scope.items[j].ServicioId == item) {
               newitem = $scope.items[j];
               $scope.itemsSC.push(newitem);
           }
        }             

       for (var i = 0; i < $scope.itemsSC.length; i++) {
           $scope.editingData[$scope.itemsSC[i].Id] = false; 
       }            
    }


    $scope.editOrCreate = function (item) {       
        $scope.currentItem = item;    
        $scope.editingData[item.Id] = true;    
    }

   $scope.list();

  });

Функция {{getNameC(currentItem.ServicioId}}), показанная в html-файле, вызывает функцию $scope.getItemsSC(item) после того, как ей известны сервисы и клиент, связанные с данными, которые будут показаны, и именно эта функция тот, который инициализирует логические значения для зеркального массива $scope.editingData в зависимости от идентификатора элемента.

Функция $scope.editOrCreate(item) — это функция, которая изменяет логический объект указанного элемента, чтобы представление отображало для пользователя элемент ввода вместо данных. Однако $digest повторно запускает функцию $scope.getItemsSC(item), потому что $watches были изменены, а этого я хочу избежать, потому что в этом случае элементы ввода никогда не отображаются.

Заранее благодарю за любую помощь


person Jorge    schedule 08.01.2017    source источник
comment
вам следует избегать вызова функций в выражениях {{ }} подобным образом и вместо этого инициализировать данные из вашего контроллера. Это не на самом деле проблема ng-if или ng-show, это связано с тем, что вы вызываете функции для каждого дайджеста, заменяя текущее установленное значение.   -  person Claies    schedule 08.01.2017
comment
функции должны быть зарезервированы для действий (например, ng-click), а не для отображения.   -  person Claies    schedule 08.01.2017
comment
Большое спасибо за Вашу помощь!!   -  person Jorge    schedule 09.01.2017


Ответы (1)


Вместо использования HTML для вызова функций, когда данные доступны, используйте свойство $promise, прикрепленное к ресурсам.

$scope.list = function () {
   $scope.items = serviciosConceptoFactory.query();

   $scope.itemsT = serviciosConceptoTipoFactory.query();
   $scope.items.ServicioConceptoTipo = $scope.itemsT;

   $scope.itemsS = serviciosFactory.query();
   $scope.items.Servicio = $scope.itemsS;

   $scope.itemsC = clientesFactory.query();
   $scope.itemsS.Cliente = $scope.itemsC;

   var promiseArray = [$scope.items.$promise,
                       $scope.itemsT.$promise,
                       $scope.itemsS.$promise,
                       $scope.itemsC.$promise
                      ];

   $q.all(promiseArray).then(function(resultsArray) {
        var items = resultsArray[0];
        var itemsT = resultsArray[1];
        var itemsS = resultsArray[2];
        var itemsC = resultsAttay[3];

        //create mirror array here
        //create editingData array here
   });
};

Используя метод .then обещаний, обработка данных может быть отложена до тех пор, пока они не поступят с сервера. Таким образом, нет необходимости, чтобы HTML вызывал функции.

person georgeawg    schedule 08.01.2017
comment
Большое спасибо за Вашу помощь!! - person Jorge; 09.01.2017
comment
Если вы нашли ответ полезным, пожалуйста, примите его. Так другие читатели узнают. - person georgeawg; 09.01.2017
comment
Да, я нашел оба ответа полезными, еще раз большое спасибо. - person Jorge; 10.01.2017