我的选项列表没有正确填写(jquery-ui选项列表+ angularjs填充)

时间:2016-01-28 13:35:31

标签: javascript jquery angularjs jquery-ui

我正在使用:https://code.google.com/archive/p/jquery-ui-picklist/

我知道我不应该混合两种技术,但是没有太多的angularjs选项列表,我从jquery-ui实现了这个。

它正在我的模态中打开选项列表,但是使用ng-repeat并且不会出现任何错误并且不起作用。

它曾用于我正在使用的另一个选项列表(另一个模板)。

问题是什么?

enter image description here

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>   

1 个答案:

答案 0 :(得分:0)

好吧,我自己制作了一个选项列表并将css课程应用到它。

比将Jquery与AngularJS混合更好,它只会给我带来麻烦和错误。