为什么我的下拉列表中添加了一个空格答案

【问题标题】：why my dropdwon adding a blank space angularjs为什么我的下拉列表中添加了一个空格
【发布时间】：2016-10-21 08:49:02
【问题描述】：

我正在从angularjs 获取来自webservice 的数据，并且数据以Json 格式输入

这是我的js文件

//getzonebyid
            $http.get('/zone.asmx/zone', {
                params: {
                    log: log,
                    pm: pm,
                    id: $scope.updateparam.Id
                }
            })

            .then(function (response) {
                {
                    $scope.gzone = response.data.zone;
                    console.log(response.data.zone);
                }
            });

这是我的下拉列表

<select ng-model="uzone" ng-change="locationupd(c)">
       <option ng-repeat="l in gzone" value="{{l.jzone}}">{{l.jzone}}</option>
</select>

我不知道为什么我的下拉列表顶部有一个额外的空格，我只想让我的第一个 option 成为来自我的数据库的第一个值，但我被我的下拉菜单

我也试过了

$scope.uzone=$scope.gzone[0].value;

但这对我没有帮助请大家，我从现在开始就一直坚持这一点

Json 格式的数据{"zone":[{"jzone":"South"},{"jzone":"East"},{"jzone":"North"},{"jzone":"West"}]}

【问题讨论】：

在这里发布你的 json
@Sajeetharan {"zone":[{"jzone":"South"},{"jzone":"East"},{"jzone":"North"},{"jzone":"West"}]}
将$scope.uzone=$scope.gzone[0].value;更改为$scope.uzone = $scope.gzone[0]["jzone"];。 gzone 对象没有 value 属性
stackoverflow.com/questions/40148724/…的可能重复

标签： javascript c# angularjs web-services

【解决方案1】：

发生这种情况是因为，甚至可能取决于您编写选择标签的方式，让我向您展示一些示例，您可以获得更好的知识：

(function(angular) {
  'use strict';
angular.module('staticSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = {
     singleSelect: null,
     multipleSelect: [],
     option1: 'option-1'
    };

    $scope.forceUnknownOption = function() {
      $scope.data.singleSelect = 'nonsense';
    };
 }]);
})(window.angular);

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example</title>  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body ng-app="staticSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="singleSelect"> Single select: </label><br>
    <select name="singleSelect" ng-model="data.singleSelect">
      <option value="option-1">Option 1</option>
      <option value="option-2">Option 2</option>
    </select><br>

    <label for="singleSelect"> Single select with "not selected" option and dynamic option values: </label><br>
    <select name="singleSelect" id="singleSelect" ng-model="data.singleSelect">
      <option value="">---Please select---</option> <!-- not selected / blank option -->
      <option value="{{data.option1}}">Option 1</option> <!-- interpolation -->
      <option value="option-2">Option 2</option>
    </select><br>
    <button ng-click="forceUnknownOption()">Force unknown option</button><br>
    <tt>singleSelect = {{data.singleSelect}}</tt>

    <hr>
    <label for="multipleSelect"> Multiple select: </label><br>
    <select name="multipleSelect" id="multipleSelect" ng-model="data.multipleSelect" multiple>
      <option value="option-1">Option 1</option>
      <option value="option-2">Option 2</option>
      <option value="option-3">Option 3</option>
    </select><br>
    <tt>multipleSelect = {{data.multipleSelect}}</tt><br/>
  </form>
</div>
</body>
</html>

【讨论】：

我的下拉菜单使用的是静态值，但不是动态的
是的没错，你的初始化有问题 $scope.gzone = response.data.zone; ，请重新检查。

【解决方案2】：

您的代码的问题是，您正在使用 ng-model 但没有为其设置默认值，

  <select ng-init="selected='South'" ng-model="selected " ng-options="c.jzone as c.jzone for c in result.zone"></select>

DEMO

【讨论】：

默认值为动态
无论是什么你都需要根据逻辑设置值
我设置了类似{{zone}} 的值，但没有帮助
@APIControls 你检查了我上面显示的示例吗？
是的，我调用静态数据没有问题，但调用动态数据有问题