爲什麼這個選擇框不顯示「選擇一個」選項？

我有一個選擇框，它是動態填充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

爲什麼這個選擇框不顯示「選擇一個」選項？

回答

相關問題