Question

问题：我的表单工作正常。但是，我无法设置空白项目以显示在下拉列表中。

我是角度和javascript的新手，我无法弄明白。

我有以下代码行：

$scope.miles =  [{'value':'5'},{'value':'10'},{'value':'15'},{'value':'20' }];

以下是表格：

＆＃13;

 <div class="panel panel-default">
	<div class="panel-body">
		<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form" ">
			<div class="form-group"><input class="form-control" id="hospital" ng-model="searchParam.HospitalName" placeholder="Hospital Name" type="text" /></div>

			<div class="form-group">
            <select class="form-control" id="city" ng-model="searchParam.City">
            <option disabled="disabled" selected="selected" value="">City</option>  
            <option value=""></option>
						  <cfoutput query="HospCityFind">
						  <option value=#officecity#>#officecity#</option>
						</cfoutput> 
					  </select></div>

			<hr />
			<div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important"><strong>* OR Search by Zip code radius *</strong></div>

		<div class="row">
			<div class="col-xs-7 no-right-padding">
				<div class="form-group">
					<div class="input-group">
						<select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles" required>
							 <option selected disabled hidden style='display: none' value=''></option><!---<option >5</option><option>10</option><option>15</option><option>20</option>--->
						</select>
						<div class="input-group-addon">miles</div>
					</div>
				</div>
			</div>

			<div class="col-xs-5 no-left-padding widthZip">
				<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>

			<div class="form-group"><input class="btn btn-warning btn-block" onclick="return checkTextField()" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search"/></div>
		</form>
	</div>
</div>

＆＃13;

如何设置要显示的空白项目，但值为：5是运行表单时的默认值。因此，当用户进入页面时，里程被设置为空白，但在用户输入医院和城市的名称时仍会生成结果。如果用户输入邮政编码，则会生成警报。

更新我按照Sibi Raj的建议尝试了以下操作：

<select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance" required>
                        <option selected disabled value=''></option>
                        <option ng-repeat="data in miles" value={{data.value}}>{{data.value}}</option>
                    </select>

工作正常，但它会创建一个额外的行：

当我检查时，我得到这个奇怪的值填充：

如何删除未知的空白区域？

更新

感谢Sibi Saj，我能够在文本框中创建一个空白区域，当用户输入医院名称和城市位置时，仍会显示结果。

然而，当我输入一个邮政编码并选择一个范围，意味着里程，而不是在里程数内显示医院时，它将显示整个结果。

以下是Sibi Saj帮助我的脚本：

var myApp = angular.module('myApp', []);

    // Controller
    myApp.controller('demoController', ['$scope', function($scope) {
      $scope.searchParam = {
        distance: 5 //set the value to the select box
      }
      $scope.miles = [{
        'value': '5'
      }, {
        'value': '10'
      }, {
        'value': '15'
      }, {
        'value': '20'
      }];
    }]) 

    // directive that converts number-string to number 
    myApp.directive('convertToNumber', function() {
      return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
          ngModel.$parsers.push(function(val) {
            return val != null ? parseInt(val, 10) : null;
          });
          ngModel.$formatters.push(function(val) {
            return val != null ? '' + val : null;
          });
        }
      };
    });

如何根据邮政编码显示在里程内的结果？

Answer 1

您可以尝试在重复中添加一个选项：

<select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles" required>
    <option selected disabled hidden style='display: none' value=''>
      <option value="5"></option>
    </option>
</select>

Answer 2

而不是ng选项，您可以使用ng-repeat

<select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance" required>
    <option selected disabled value=''>Select</option>
      <option ng-repeat="data in miles" value={{data.value}}>{{data.value}}</option>
</select>

Answer 3

将convert to number指令添加到您的代码＆＃34; convert-to-number＆＃34;在选择元素

中

在HTML中

  <select class="form-control" id="miles" name="distance" ng-model="searchParam.distance" required convert-to-number>
<option value="">Select Me</option>
<option value={{v.value}} ng-repeat="(k , v) in miles track by $index">{{v.value}}</option>

脚本（不要忘记添加指令）

var myApp = angular.module('myApp', []);

// Controller
myApp.controller('demoController', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';
  $scope.searchParam = {
    distance: 5 //set the value to the select box
  }
  $scope.miles = [{
    'value': '5'
  }, {
    'value': '10'
  }, {
    'value': '15'
  }, {
    'value': '20'
  }];
}]) 

// directive that converts number-string to number 
myApp.directive('convertToNumber', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$parsers.push(function(val) {
        return val != null ? parseInt(val, 10) : null;
      });
      ngModel.$formatters.push(function(val) {
        return val != null ? '' + val : null;
      });
    }
  };
});

这里是plunker https://plnkr.co/edit/srCJAgJ9fnOnbVzp5FL3?p=preview

空白HTML SELECT中没有空白项目的下拉列表中的角度

3 个答案: