我有一个动态填充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>
但这是我在运行应用程序时看到的内容。
更新:我使用的是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' }
]
};
});
&#13;
<!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>
&#13;
答案 0 :(得分:1)
您的上述代码似乎工作正常。
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>
答案 1 :(得分:1)
你可以尝试这样的不同方法:
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>
答案 2 :(得分:0)
使用此代码它将解决您的问题
<select ng-model="context.product" ng-options="product.name for product in data.products">
<option value="" disabled>Select one</option>
</select>
答案 3 :(得分:0)
我认为您正在搜索解决方案,如下面的运行代码段,让我知道它是否适合您
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"
进行禁用并选择您的值。