CODEWITHSUNDEEP
angularjsajax
Kanza
Kanza

Reputation: 51

Populate a combobox in Angular with Java BackEnd

The thing is as told in the title.

(function(){
    var app = angular.module('sbi', [ ]);
    app.controller('PanelController', function (){
        this.tab = 1;

        this.selectTab = function (setTab){
            this.tab = setTab;
        };
        this.isSelected = function(checkTab) {
            return this.tab === checkTab;
        };
      });


app.controller('MyCtrl', function($scope, $compile) {
      'use strict';

      $scope.data = { "name": ""};

        $scope.reset = function() {
          $scope.data.name = "";
          $scope.data.codeSub = "";
          $scope.data.cognSub = "";
          $scope.data.codfis = "";
          $scope.data.drpdownvalue = "";
          $scope.form.$setPristine();
        }
    });

app.controller('DdController', function($scope, $compile) {
    'use strict';

    var loadUrl = contextName+"/subinstaller/inserimento/dettaglio.do?methodName=doListenerStato";
    $.ajax({
        async: false,
        url : loadUrl,
        type: "GET",
        data: data, 
        dataType: 'json',
        cache: false,
        complete: function(){
            _show_(false,'waitPanel');
        },
        success : function (data, stato) {
            $('#service').empty()
            for(var i = 0; i < data.length; i++) {
                $("#service").append($('<option value="'+data[i].code+'">'+data[i].descr+'</option>'));                 
            }
            $('#service').trigger("chosen:updated");
        },
        error : function (richiesta, stato, errori) {
            _show_(false,'waitPanel');
            alert("error caricaServices");
        }
    });
    });


})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script><!DOCTYPE html>
<html ng-app="sbi">
<head>
    <link href="utils/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <style>
        table, td  { border-width: 2px; border-collapse: collapse; padding: 15px; color: #000000; text-align: center; }
        table.pos_fixed1 { position:relative; top:30px; left:10px; }
    </style>
</head>
<body>


<form name="form">
            <div data-ng-controller="MyCtrl">
            <table summary="" width="10%" class="pos_fixed1" align="center">
            <tr><td>Code Subinstaller<br><input type="text" ng-model="data.codeSub" /></td>
            <td>Stato<br>
            <select ng-model="data.drpdownvalue">
            <option value=""> -- Seleziona -- </option>
        </select> </td><td></td></tr>
            <tr><td>Nome Sub Installer<input type="text" ng-model="data.name" /></td>
            <td>Cognome Sub Installer<input type="text" ng-model="data.cognSub" /></td>
            <td>Codice Fiscale<input type="text" ng-model="data.codfis" /></td></tr>
        </table><br><br>
        </form>
        <section>
            <div class="text-center">
            <form name="form" id="form" novalidate>
                  <div>
            <button class="btn-xs" data-ng-click="">Cerca</button>
            <button class="btn-xs" ng-click="reset()">Pulisci</button>
            </div>
            </div>
            </form>
            </div>
        </section>


 <section ng-controller="PanelController as panel">
 <ul class="nav nav-pills" >
<li ng-class="{ active:panel.isSelected(1) }"> <a href ng-click="panel.selectTab(1)">Risultati</a></li>
<li ng-class="{ active:panel.isSelected(2) }"> <a href ng-click="panel.selectTab(2)">Dettaglio</a></li>
 </ul>

 <div class="panel" ng-show="panel.isSelected(1)">
 <h4>Risultati</h4>
 <p> :))) </p>
 </div>
  <div class="panel" ng-show="panel.isSelected(2)">
 <h4>Dettaglio</h4>
 <p> Not skilled enough yet</p>
 </div>




</section>



<script type="text/javascript" src="utils/angular.min.js"></script>
<script type="text/javascript" src="controllers/sbi_inserimento_controller1.js"></script>

</body>
</html>

The function "DoListenerStato" has its query and it works (tried in Java) But the combobox is not being populated. Have I used ajax correctly? If so, what can I do? I'd prefer to keep using ajax for this work, if possible.

Upvotes: 0

Views: 236

Answers (1)

Gaurav Goenka
Gaurav Goenka

Reputation: 142

Can you try $http.get instead of $.ajax.

in Controller.js file:

$scope.data = {};
$http.get(loadUrl).then(function (response){
     $scope.data = response.data;
     //success callback
}, function (response) {
    //error callback
});

Since you already have data.**** in your ng-model this should solve it.

Upvotes: 1

Related Questions