Question

我想要做的是当用户选择一个城市时，默认输入里程并且邮政编码只是单独留空。

以下是代码我允许用户根据将要显示的列表选择城市。我还提供了邮政编码和里程以及它们的生成方式。

<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>

我正在尝试按照我所理解的方式执行以下操作：

<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>

Answer 1

你知道，你在使用angularjs吗？

对于您的模型，您需要一个像这样的控制器

sudo service apache2 restart

无法看到您的angularJS实施。你复制+粘贴？如果你有基础知识，也许这对你有帮助。

Answer 2

嗯，我对你提出的问题是：你想要相应地改变里程数，是吗？

我不确定我的解释是否正确，但我做了这个片段：

(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>

根据所选值设置默认值

2 个答案: