I'm new to web programming, and I'm having a problem opening a modal screen using bootstrap. Basically I have a grid controlled by ng_repeat in which I have buttons when clicking on the edit button I want to open the modal screen contains the data related to the button line, so the button call was coded that way (passing the lor data-whatever value) . However, when executing the program it only passes the value of the first data-whaterver, the other one is not passed to the modal by the function (Edit-Modal).
Modal call button:
<div class="modal fade" id="Editar-Modal" tabindex="-1" role="dialog" aria-labelledby="Editar-ModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="Editar-ModalLabel">Editar</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-nome" class="control-label">Nome do usuário:</label>
<input type="text" class="form-control" id="Edtnome">
</div>
<div class="form-group">
<label for="recipient-empresa" class="control-label">Empresa padrão:</label>
<input type="text" class="form-control" id="Edtempresapad">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-primary">Salvar</button>
</div>
</div>
</div>
</div>
<script>
/*Função para carregar a tela ao entrar*/
angular.module("cadastros", []).controller("cadpri-user-ctrl", function($scope, $http){
$scope.users = [];
//var app = angular.module('cadastros', ['angularUtils.directives.dirPagination']);
angular.module('cadastros', ['angularUtils.directives.dirPagination']);
var carregarUsers = function(){
$http({
method: 'GET',
url: 'usuarios'
}).then(function successCallback(response) {
$scope.users = {
cd_usuario:response.data.cd_usuario,
id_empresa_padrao:response.data.id_empresa_padrao,
ds_usuario:response.data.ds_usuario,
nr_telefone:response.data.nr_telefone,
nr_ramal:response.data.nr_ramal,
ds_e_mail:response.data.ds_e_mail,
fg_adm:response.data.fg_adm,
dt_inclusao:response.data.dt_inclusao,
};
$scope.users = response.data;
//console.log($scope.users);
//setTimeout( 1000);
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
/*Função de excluir usuário*/
$scope.removeONUser = function(_user){
$scope.users[0];
$http({
method:'DELETE',
url:'userRemove',
data:JSON.stringify({
ds_e_mail:_user.ds_e_mail,
})
}).then(function(response){
carregarUsers();
}, function(){
});
//Função usando ng-submit
};
$scope.ordenar = function(keyname){
$scope.sortKey = keyname;
$scope.reverse = !$scope.reverse;
};
carregarUsers();
});
$(document).on("click", "#sendsenha", function () {
var info = $(this).attr('ds_e_mail');
var str = info.split('|');
var username = str[0];
$(".modal-body #username").val(enailexibir);
});
/*Funções javascript*/
function checkCols ()
{
//var linha = document.getElementById("teste");
var colunas = linha.getElementsByTagName('ds_e_mail');
for (i=0;i<colunas.length;i++)
{
alert("conteudo da coluna"+i+" ->"+colunas[i].firstChild.nodeValue);
}
};
$('#Editar-Modal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
var recipientnome = button.data('whateverEdtnome')
var recipientempresa = button.data('whateverEdtempresapad')
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('Editar o usuário ' + recipient)
modal.find('#id').val(recipient)
modal.find('#Edtnome').val(recipientnome)
modal.find('#Edtempresapad').val(recipientempresa)
})
</script>'