'Set default values based on selected value

What I am trying to do is when the user selects a city, by default the miles is entered and the zip code is just left alone, blank.

The following is code I allows a user to select a city based on a list that will display. I also provided the zipcode and the miles and how they are generated as well.

<div class="form-group">
  <select class="form-control" id="city" 
          ng-model="searchParam.City" 
          ng-options="City.value for City in Cities">
        <option disabled="disabled" selected="selected" value="">City</option>
  </select>
</div>

<div class="row">
  <div class="col-xs-7 no-padding-right">
    <div class="form-group">
      <div class="input-group">
        <select class="form-control" name="distance" 
        ng-model="searchParam.Distance" 
        ng-options="mile.value for mile in miles"></select>
        <div class="input-group-addon">miles</div>
      </div>
    </div>
  </div>

  <div class="col-xs-5 no-padding-left">
    <div class="form-group">
      <input allow-pattern="[\d\W]" class="form-control" 
             id="zip" maxlength="5" ng-model="searchParam.Zip" 
             placeholder="Zip code" type="text" />
    </div>
  </div>
</div>

I am trying to do the following with what I am understanding:

<script>
   function citySelected(){
      if(searchParam.City.selected){
          not sure how to set miles to default 
          not sure how to say leave zip code blank
      }
   }
</script>

javascript angularjs

Solution 1:^[1]

Well, what I've got of your question: is that you want to change the miles accordingly to city selected, is it?

I'm not sure if my interpretation was correct, but I made this snippet:

(function() {
  "use strict";
  angular.module('app', [])
    .controller('mainCtrl', function($scope) {
      $scope.cities = [  
         {  
            "name":"Alabama",
            "distance":"400"
         },
         {  
            "name":"Arkansas",
            "distance":"600"
         },
         {  
            "name":"New York",
            "distance":"800"
         }
      ];
    })
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <div class="form-group">
    <select class="form-control" id="city" ng-model="city" ng-options="city as city.name for city in cities">
      <option value="">--Select city--</option>
    </select>
  </div>
  <div class="row">
    <div class="col-xs-7 no-padding-right">
      <div class="form-group">
        <div class="input-group">
          <input type="text" class="form-control" id="distance" ng-model="city.distance">
          <div class="input-group-addon">miles</div>
        </div>
      </div>
    </div>
    <div class="col-xs-5 no-padding-left">
      <div class="form-group">
        <input type="text" class="form-control" id="zip" maxlength="5" ng-model="zip" placeholder="Zip code">
      </div>
    </div>
  </div>
</body>

</html>

Solution 2:^[2]

You know that you are using angularjs?

For your model you need a controller like this

module.exports = function($scope) {
    var default = '50';
    $scope.Distance = default;
    $scope.Zip = '';
};

Can't see your angularJS implementation. You did copy+paste?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	developer033
Solution 2

'Set default values based on selected value

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]