I do now know, but I think jquery is conflicting with my angular datatable, but even when I take off jquery (hide and show elements), ng-click keeps not working.
Here goes as well a printscreen from my table:
My AngularJS js:
angular.module('BoxApp').controller("ConfiguraBkpEmail", function($scope, $http) {
var urlRestServer = "http://localhost:8080/boxmlV2";
$scope.clientes = {};
$scope.clientesSelecionados = {};
$scope.iniciar = function() {
$http.get(urlRestServer + '/configurabkpemail').success(function(response) {
$scope.clientes = response;
});
};
$scope.iniciar();
$scope.selecionaClientes = function(selecao){
$scope.clientesSelecionados = selecao;
$('#myModal').modal('show');
if($scope.clientesSelecionados.backupEmail == 0){
// $('#enderecoEmailBackup').hide();
// $('#idLabel').hide();
} else {
// $('#enderecoEmailBackup').show();
// $('#idLabel').show();
}
};
/**
* Trecho para validar o form ao submeter.
*/
$scope.submitted = false;
$scope.submitForm = function(form) {
$scope.submitted = true;
if (form.$valid) {
$scope.editaEmailBkp();
}
};
$scope.editaEmailBkp = function() {
var dados = {
idCliente : idCliente.value,
razaoSocial : razaoSocial.value,
backupEmail : $scope.clientesSelecionados.backupEmail,
enderecoEmailBackup : enderecoEmailBackup.value
};
$http.post(urlRestServer + '/configurabkpemail/salvar', dados).then(function(response) {
$scope.sucesso();
}, function(response) {
});
};
$scope.sucesso = function() {
$scope.closeModal();
$scope.iniciar();
};
$scope.closeModal = function() {
// $('#myModal').modal('hide');
};
$scope.opcoesBkps = [
{OpcaoBkpID: 0, Tipo: '0 - Sem backup de e-mail'},
{OpcaoBkpID: 1, Tipo: '1 - Backups inconsistentes'},
{OpcaoBkpID: 2, Tipo: '2 - Backup de Todos E-mails'}
];
});
My html:
<div class="row">
<table datatable="ng" id="configuraBkpEmail" class="row-border hover table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Nome Empresa</th>
<th>CNPJ</th>
<th>Backup E-mail</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in clientes" ng-click="selecionaClientes(x)">
<td><span ng-bind="x.razaoSocial" /></td>
<td><span ng-bind="x.cnpj" /></td>
<td><span ng-bind="x.strOpcaoBackupEmail" /></td>
</tr>
</tbody>
</table>
</div>
My modal that should be opened:
<!-- Modal INICIO-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">Configuração Backup de E-mail</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<f<div ultimate-datatable="datatable" width="100%"></div>orm name="form" id="form_sample_2" role="form"
class="form-horizontal ng-pristine ng-valid" novalidate>
<div class="form-group">
<label class="control-label col-md-3">Nome:<span
class="required" aria-required="true"> * </span></label>
<div class="col-md-9">
<input type="text"
ng-model="clientesSelecionados.razaoSocial"
class="form-control" id="razaoSocial" maxlength="100"
name="razaoSocial" required disabled> <span
style="color: red"
ng-show="submitted && form.razaoSocial.$error.required">Campo
Nome Obrigatório.</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Backup de
E-mail:<span class="required" aria-required="true"> *
</span>
</label>
<div class="col-md-9">
<select size="1" name="backupEmail"
ng-model="clientesSelecionados.backupEmail"
ng-change="selecionaClientes(clientesSelecionados)"
class="form-control"
ng-options="opcoesBkp.OpcaoBkpID as opcoesBkp.Tipo for opcoesBkp in opcoesBkps"
required>
<option value="">Selecione um Recurso.</option>
</select> <span style="color: red"
ng-show="form.backupEmail.$error.required">Selecione
uma opção de backup.</span>
</div>
</div>
<div class="form-group">
<label id="idLabel" class="control-label col-md-3">Endereço:<span
class="required" aria-required="true"> * </span>
</label>
<div class="col-md-9">
<input type="email"
placeholder="Endereço do Backup para encaminhamento."
ng-model="clientesSelecionados.enderecoEmailBackup"
class="form-control" id="enderecoEmailBackup"
maxlength="100" name="enderecoEmailBackup">
</div>
</div>
<div class="form-group">
<label id="idLabel" class="control-label col-md-3">ID:<span
class="required" aria-required="true"> * </span></label>
<div class="col-md-9">
<input type="text" ng-model="clientesSelecionados.idCliente"
class="form-control" id="idCliente" maxlength="100"
name="idCliente" disabled> <span
style="color: red"
ng-show="submitted && form.idCliente.$error.required">Campo
ID Obrigatório.</span>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancelar
</button>
<button type="submit" class="btn btn-primary" ng-click="submitForm(form)">
Salvar
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Modal FIM-->
