CODEWITHSUNDEEP
javascripthtmlangularjsjspstruts
Klam
Klam

Reputation: 143

How to mix struts1 with angularjs to auto populate a field

I'm building a jsp page with struts1 (i cannot use struts2) where i have a field i'm auto populating with a value coming from the form, but the user is free to overwrite anything in that text field. I have also used AngularJS to be able to give options while the user types (google-like search) when they are overriding the value pre-populated by struts.

My problem is that the tags ng-model and uib-typeahead are not recognized by the html:text tag in struts. If i switch to a plain html input tag then the angular feature works but now i cannot pre-populate the field with struts.

script.js:

  angular.module('plunker', ['ui.bootstrap','ngAnimate']).controller('TypeaheadCtrl', function($scope, $http) {

  $scope.selected = undefined;
  // Any function returning a promise object can be used to load values asynchronously
  $scope.getLocation = function(val) {
    return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
      params: {
        address: val,
        sensor: false
      }
    }

  ).then(function(response){
        return response.data.results.map(function(item){
          return item.formatted_address;
        });
      });
    };
  });

mypage.html

<body ng-controller="TypeaheadCtrl">

 <div class='container-fluid typeahead-demo' >

   <div class="section">
         <!-- OPTION 1: angular works and gives suggestions, but the field doesn't get pre-populated by struts-->
         <input type="text" name="city" id="city" class="gui-input" ng-model="asyncSelected" uib-typeahead="address for getLocation($viewValue)"  placeholder="Type city name">
         <html:hidden property="city"/>

         <!-- OPTION 2: auto-populates value but it can't compile with ng-model and typegead tags -->
         <html:text property="city" styleClass="gui-input" styleId="cityStyle" />
   </div>
</div>

Can someone please tell me what the best way or appropriate way of doing this is? how do i mix the functionality of Option 1 and Option 2?

Thanks in advance.

Upvotes: 0

Views: 363

Answers (1)

Klam
Klam

Reputation: 143

I already resolved it by setting the value of the field using jquery on load, but if someone has a better solution or better practice to do this, i'd like to know.

Upvotes: 0

Related Questions