Я показываю некоторые данные в веб-приложении, которые я получаю из базы данных 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 были изменены, а этого я хочу избежать, потому что в этом случае элементы ввода никогда не отображаются.
Заранее благодарю за любую помощь
{{ }}
подобным образом и вместо этого инициализировать данные из вашего контроллера. Это не на самом деле проблемаng-if
илиng-show
, это связано с тем, что вы вызываете функции для каждого дайджеста, заменяя текущее установленное значение. - person Claies   schedule 08.01.2017ng-click
), а не для отображения. - person Claies   schedule 08.01.2017