Does not load data into the picklist (jquery-ui + Angularjs)

Asked

Viewed 253 times

0

using: https://code.google.com/archive/p/jquery-ui-picklist/

I can’t load data from my client table into the picklist. It was already working on another template, changed the template in the company and I’m adapting to new components. I took this picklist out because the template doesn’t have.

What could be wrong? I have no idea, just don’t load anything into the picklist.

inserir a descrição da imagem aqui

angular.module('BoxApp').controller("CadastroCertificado", function($scope, $http) {

	$scope.clientes = {};
	$scope.listaEmpresas = [];
	
	$scope.iniciar = function() {
		$http.get(urlRestServer + '/cadastrocertificado').success(function(response) {
			$scope.clientes = response;
			
		});
	};

	$scope.iniciar();	
	
	/**
	 * Trabalhando o componente picklist
	 */
    $scope.clientes2 = [];	    
	$scope.atribuirUm = function(index, c) {
		var cliente = {};
		cliente.idCliente = c.idCliente;
		cliente.razaoSocial = c.razaoSocial;
	    $scope.clientes2.push(cliente);
	    $scope.clientes.splice(index, 1);
	};
	$scope.limparUm = function(index, c2) {
	    $scope.clientes2.splice(index, 1);
	    $scope.clientes.push(c2);	    
	};
	
	/**
	 * Trecho para validar o form ao submeter.
	 */
	$scope.submitted = false;
	$scope.submitForm = function(form, clientes2) {		
		$scope.listaEmpresas = $scope.clientes2;
		$scope.submitted = true;
		if (form.$valid) {			
			$scope.cadastraCertificado();
		}
	};	

	/**
	 * Requisição POST (ajax)
	 */
	$scope.cadastraCertificado = function() {
		
		var dados = {
				urlCertificado : $scope.certificadoIncluirAlterar.urlCertificado,
				strDataValidadeCertificado : $scope.certificadoIncluirAlterar.strDataValidadeCertificado.toString(),
				senhaCertificado : $scope.certificadoIncluirAlterar.senhaCertificado,
				listaEmpresas : $scope.listaEmpresas				
		};
		
		$http.post(urlRestServer + '/cadastrocertificado/salvarCertificado', dados).then(function(response) {
			
		}, function(response) {	
			$scope.sucesso();
		});
	};	
	
	$scope.sucesso = function() {
		$scope.closeModal();
		$scope.iniciar();		
	};
	
	$scope.closeModal = function() {
		$('#myModal').modal('hide');
	};

});
<div class="form-group">
    <label class="control-label col-md-3">Empresas:</label>
    <div class="col-md-9">
        <select id="foobar" name="foobar" multiple="multiple">                                             
              <option ng-repeat="c in clientes" value="{{c.idCliente}}" ng-click="atribuirUm($index, c)">{{c.razaoSocial}}</option>
              <option selected ng-repeat="c2 in clientes2" value="{{c2.idCliente}}" ng-click="limparUm($index, c2)">{{c2.razaoSocial}}</option>
        </select>
    </div>
</div>

jquery angularjs jquery-ui jquery-ui-multiselect

2 answers

1

How are you making a request with $http, you are expecting a response with this header:

(data, status, headers, config)

If you get a status positive, that is, with a valid return, the data will be within the data. This way you need to access the information there, see:

$scope.clientes = response.data;

  • Celsom, I’m working with Sponse on the screen where I fill a grid, I work with ng-repeat on top of customers, like you said. Already in select, I also work, with ng-repeat also on top of clients, where my Answer was, I created a function to assign the q was selected to the list of the right and vice versa, but neither click on it customers. I wouldn’t use ng-repeat here? Because the component is in jquery but my app is all angular.

  • Yes, but first you need to have the values, right? In your role $scope.iniciar = function() probably you are not capturing the data correctly, as stated in the reply. Try to change the treatment as reported in the reply. ng-repeat will only be used later, after assigning the data.

  • Celsom, the return that is in Respose, are 20 client objects of the base. The values are being stored in 'clients'. Need to fix something here if the values are coming ok? I do not understand how I need to fix based on the answer.

  • 'Cause this way it worked before, I just changed the component.

  • If you put console.log(response) before $scope.clientes = response; what appears on the console?

0


It is really complicated to mix jquery with angular, do not recommend, just gave error.

The component was in jquery and I manipulating with angular due to several internal reasons of the project here in the company.

In short, I made a picklist by hand and created the javascript functions to manipulate from one side to the other.

Browser other questions tagged jquery angularjs jquery-ui jquery-ui-multiselect

You are not signed in. Login or sign up in order to post.