为什么这个选择框不显示“选择一个”选项？

我有一个选择框，它是动态填充ng-option。我希望它默认显示“选择一个”。我用下面的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>

但是，这是我看到，当我运行该应用程序。

更新：我使用的角度1.6.5

更新：Vivz增加了工作的代码片段，在他回答的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="[email protected]" 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>

来源

2017-08-04 Isuru Pathirana

尝试删除该类并检查它是否到来。我现在只是测试，选择一个默认即将到来。你使用的是哪个版本的bootstrap？ – Vivz

@Vivz我正在使用bootstrap v3.3.7。我认为这与Angular有关 –

我不这么认为，我使用了你的代码，并且它默认会来。检查下面的答案。如果围绕选择或标签的css出现问题，可能会发生这种情况。只需验证。 – Vivz

你可以尝试这样一种不同的方法：

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="[email protected]" 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>

来源

2017-08-04 06:10:43

@Gurav是的。这是一个选项。我只是试图在这里使用角度最佳实践。但是如果没有办法使用ng-option来完成它。这似乎是要走的路。 –

@ isuru-buddhika我更新了答案，但我仍然认为第一种方法是好的。 –

使用此代码，将解决你的问题

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

来源

2017-08-04 05:29:14

肯定存在一些问题，它不适用于Angular 1.6 Mitul。你正在使用什么样的Angular版本？ –

我已使用此版本 https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js –

你的上面的代码似乎很好地工作。

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="[email protected]" 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>

来源

2017-08-04 05:35:10 Vivz

嗯。我正在使用Angular 1.6。我在JSBin中试过你的代码，看起来它可以使用1.4而不是使用1.6。 –

我已经用Angular 1.6.x的代码片断更新了问题。它没有按预期工作。 –

我不认为有一个正确的方法来使用最新版本的角度ng选项。如果你想以你想要的方式保持一切，那么这是不可信的。但是，您可以使用肮脏的方式来操作您的选择选项，并将其选为默认禁用选项。但我认为使用ng-repeat会是最好的。 – Vivz

我认为你正在寻找解决方案像下面运行片段，让我知道如果它适合你

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="[email protected]" 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"为禁用，然后选择你的价值。

来源

2017-08-04 06:23:31 CIPHER007

为什么这个选择框不显示“选择一个”选项？

回答

相关问题