Newbee trying to learn ... Please help

@aliweb00 wrote:

Hi Awesome people...

On a form in my ionic app I'm using ng-options to display options fetched using http service. What I want to do is let the user select the first option and then based on what they select, I want to give them options on the second field which gets the options using a http POST request to a rest API​ to fetch the options. When I do this, as soon as the user selects that option, my ng-change class is invoked and it calls my custom function to fetch the result but the page refreshes (I believe) and the option selected on the first field resets and I also loose all my options on the first field. Can you help?

HTML:

             <form class="list">
        <label class="item item-select" name="service">
            <span class="input-label">Services</span>
                <select style="align: left" ng-model="selectedservice"  ng-change="getStylists(selectedservice)"ng-options="service  for service in services">
                    <option style="align: left" value="">Please Select</option>
                </select>
        </label>

             <label class="item item-select" name="stylist">
            <span class="input-label">Stylists</span>
                <select style="align: left" ng-model="selectedstylist"  ng-options="stylist  for stylist in stylists">
                    <option style="align: left" value="">Please Select</option>
                </select>
        </label>

contorller:

$http({
method: 'POST',
data: {
Id:$localstorage.get('salId')
},
url: url

}).then(function successCallback(response) {
console.log(response);

  $scope.services=response.data;
  console.log($scope.services );

}, function errorCallback(response) {
console.log("Error occured while fetching services");

 });

$scope.getStylists= function(selectedservice){
$scope.selectedservice=selectedservice;
console.log($scope.selectedservice);
console.log("getStylist called");
console.log(selectedservice);
var url='http://'+API_HOST+'/*****';

$http({
method: 'POST',
data: {
Id:$localstorage.get('salId') ,
service:selectedservice
},
url: url

}).then(function successCallback(response) {
console.log(response);

  $scope.services=response.data;
  console.log($scope.stylists );

}, function errorCallback(response) {
console.log("Error occured while fetching services");

 });

Posts: 1

Participants: 1

Read full topic