为什么这个 select 框不显示 'Select One' 选项？

Question

我有一个 select 框，其中动态填充了 ng-option。我希望它默认显示 "Select one"。我使用了以下 html 希望实现这一目标。

<select id="productType" name="productType" class="col-lg-12 col-xs-12 form-control"
    ng-model="context.product"
    ng-options="product.value as product.name for product in data.products"
    ng-change="loadAccessMethods()" required>
    <option value="" disabled>Select one</option>
</select>

但这是我在运行应用程序时看到的。

更新：我正在使用 Angular 1.6.5

更新：Vivz 在他的回答中添加了一个带有 Angular 1.4.x 的工作代码片段。但它不适用于 Angular 1.6.x。任何人都可以指出为什么这在 Angular 1.6.x ?

中被破坏了

angular.module("App",[])
.controller("AppCtrl",function($scope){
$scope.context = {
    product: '',
    accessMethod: '',
    workOrderNum: 0
};

$scope.data = {
    products: [
        { name: 'ABC', value: '0', type: 't1' },
        { name: 'XYZ', value: '1', workflowType: 't2' }
    ]
};

});

<!DOCTYPE html>
<html ng-app="App">
  <head>
    <meta charset="utf-8" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <!-- <script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script> -->
    <script src=" https://opensource.keycdn.com/angularjs/1.6.5/angular.min.js "></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="AppCtrl">
    <select id="productType" name="productType" class="col-lg-12 col-xs-12 form-control"
    ng-model="context.product"
    ng-options="product.value as product.name for product in data.products"
    ng-change="loadAccessMethods()" required>
    <option value="" disabled>Select one</option>
</select>
     </div>
  </body>

</html>

Answer 1

使用此代码可以解决您的问题

<select ng-model="context.product" ng-options="product.name for product in data.products">
<option value="" disabled>Select one</option>
</select>

Answer 2

你上面的代码似乎工作正常。

var app=angular.module("App",[]);
app.controller("AppCtrl",function($scope){
$scope.context = {
    product: '',
    accessMethod: '',
    workOrderNum: 0
};
$scope.data = {
    products: [
        { name: 'ABC', value: '0', type: 't1' },
        { name: 'XYZ', value: '1', workflowType: 't2' }
    ]
};

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html ng-app="App">
  <head>
    <meta charset="utf-8" />
    <script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="AppCtrl">
    <select id="productType" name="productType" class="col-lg-12 col-xs-12 form-control"
    ng-model="context.product"
    ng-options="product.value as product.name for product in data.products track by $index"
    ng-change="loadAccessMethods()" required>
    <option value="" disabled>Select one</option>
</select>
     </div>
  </body>

</html>

Answer 3

您可以尝试这样的不同方法：

var app = angular.module("App", []);
app.controller("AppCtrl", function($scope) {
  $scope.context = {
    product: '',
    accessMethod: '',
    workOrderNum: 0
  };
  $scope.data = {
    products: [{
        name: 'ABC',
        value: '0',
        type: 't1'
      },
      {
        name: 'XYZ',
        value: '1',
        workflowType: 't2'
      }
    ]
  };
  
  $scope.context.product1 = '';

});

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

<head>
  <meta charset="utf-8" />
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <!-- <script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script> -->
  <script src=" https://opensource.keycdn.com/angularjs/1.6.5/angular.min.js "></script>
  <script src="script.js"></script>
</head>

<body>
  <div ng-controller="AppCtrl">
    <h1> First Apporach</h1>
    <select id="productType" name="productType" class="col-lg-12 col-xs-12 form-control" ng-model="context.product" ng-change="loadAccessMethods()" required>
    <option value="" disabled>Select one</option>
    <option ng-value="product.value" ng-repeat=" product in data.products">{{product.name}}</option>
    </select>
    
    
    <h2>Second approaach</h2>
     <span ng-init="data.products.unshift({ name: 'Select one', value: ''});"></span>
    <select id="productType" name="productType" class="col-lg-12 col-xs-12 form-control"
    ng-model="context.product1"    
    ng-change="loadAccessMethods()" ng-options="product.value as product.name for product in data.products" required>
</select>
  </div>


</body>

</html>

Answer 4

我认为您正在搜索如下运行代码段中的解决方案，请告诉我它是否适合您

var app=angular.module("App",[]);
app.controller("AppCtrl",function($scope){
$scope.context = {
    accessMethod: '',
    workOrderNum: 0
};
$scope.data = {
    products: [
        { name: 'ABC', value: '0', type: 't1' },
        { name: 'XYZ', value: '1', workflowType: 't2' }
    ]
};
$scope.loadAccessMethods = function() {
console.log($scope.context.product);
}
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html ng-app="App">
  <head>
    <meta charset="utf-8" />
    <script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="AppCtrl">
    <select id="productType" name="productType" class="col-lg-12 col-xs-12 form-control"
    ng-model="context.product"
    ng-options="product.value as product.name for product in data.products"
    ng-change="loadAccessMethods()" required>
    <option value="" ng-selected="true" ng-disabled="true">Select one</option>
</select>
     </div>
  </body>

</html>

我从你的网站上删除了产品 $scope.context = { accessMethod: '', workOrderNum: 0 };

并使用 ng-selected="true" ng-disabled="true" 禁用和 select 您的值。

为什么这个 select 框不显示 'Select One' 选项？

Why this select box is not displaying the 'Select One' option?

javascript

html-select

angularjs