ここでは https://plnkr.co/edit/xx8ZjBdy55sgyIYdcNAw?p=preview
を仕事ができる2つの方法のplunkerデモで私はより複雑に持っていますメソッドを最初に選択ドロップダウンをよりカスタマイズすることができます。
私はそれが別の指令にあるべきだと思います。それは私が良い形だと思うよりもコントローラでより多くの操縦が必要でした。
私は確かに専門家ではない -
のベストプラクティスについては、私には、第二のバージョンはので、おそらくあなたがそのメソッドを使用する必要があり、そのドキュメントにあったものに近づく必ずしもわかりません。
<html ng-app="selectListNgDefault">
<head>
<title>Check-box to toggle list</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"> </script>
<script src="selectListAngularSO.js"></script>
<style type="text/css" media="screen">
.left{ background-color: pink; width: 250px; height: 150px; display: inline-block; float: left;}
.right{ background-color: beige; width: 250px; height: 150px; display: inline-block; float: left;}
.demonstration{display:inline-block; border: 1px solid black; clear: both;}
.processing-message{width: 500px; background-color: yellow; display:inline-block; border: 1px solid black; clear: both;}
</style>
</head>
<body ng-controller="defaultAllSelectListCtrl" ng-init="checkedList=true">
<div class="demonstration">
<div class="left">
<h3>Using ng-repeat for selection</h3>
<label >Select a Fleet</label>
<select ng-init="selectedFleet=dfleets[0].id" ng-model="selectedFleet" ng-change="handleFleetSelectionFromString(selectedFleet)">
<option ng-repeat="fleet in dfleets" value="{{fleet.id}}" >{{fleet.brand}}({{fleet.cars}})</option>
</select>
<p>There are {{dfleets.length - 1}} fleet brands</p>
</div>
<div class="right">
<h1><em>{{selectedFleetFromId.brand}}</em> Drivers</h1>
<h2>Have {{selectedFleetFromId.cars}} cars!</h2>
</div>
</div>
<div class="demonstration">
<div class="left">
<h3>Using ng-options for selection</h3>
<label >Select a Fleet</label>
<select ng-init="ngOptionsSelectedFleet=dfleets[0]" ng-model="ngOptionsSelectedFleet" ng-options="v.brand for (k,v) in dfleets" ng-change="handleFleetSelection(ngOptionsSelectedFleet)"></select>
</div>
<div class="right">
<h1>{{ngOptionsSelectedFleet.brand}} Drivers</h1>
<h2>Have {{ngOptionsSelectedFleet.cars}} cars!</h2>
</div>
</div>
<br>
<div ng-hide="hideProcessingMessage" class="processing-message">
Alert: {{processingMessage}}
</div>
</body>
</html>
以下のjsが
var app = angular.module('selectListNgDefault', []) ;
app.controller('defaultAllSelectListCtrl', function ($scope, $http) {
var dummyData = [{id: "id1", brand: "Ford", cars: 12},{ id: "id2", brand: "Volkswagen", cars: 11},{id: 'id3', brand: "Mercedes", cars: 6},{id:"id4", brand: "Toyota", cars: 2},{id: "id5", brand: "Honda", cars: 19}];
$scope.hideProcessingMessage = true;
$scope.showDriversFleets = function() {
// $http.get('/api/driver/fleets/').then(function (res) {
// return angular.forEach(res.data, function (item) {
// return $scope.dfleets.push(item);
// });
// });
$scope.dfleets = [];
let totalCars = 0;
dummyData.forEach(function(fleet){
$scope.dfleets.push(fleet);
totalCars+= fleet.cars;
});
//alphabetize first?
$scope.dfleets.sort(function(a,b){return (a.brand < b.brand) ? -1 : 1;});
//insert your custom default to appear giving it an arbitrary id?
$scope.dfleets.unshift({id: "idAll", brand: "All Fleets'", cars: totalCars});
// initialize display if you're using more detailed ng-repeat approach
$scope.selectedFleetFromId = {id: "idAll", brand: "All Fleets'", cars: totalCars}
};
$scope.handleFleetSelection = function(fleet){
$scope.hideProcessingMessage=false;
$scope.processingMessage = "Congratulations, your " + fleet.brand + " representative will contact you soon";
}
$scope.handleFleetSelectionFromString = function(fleetIdString){
$scope.selectedFleetFromId = $scope.dfleets.find((fleet) => fleetIdString === fleet.id);
$scope.hideProcessingMessage=false;
$scope.processingMessage = "Congratulations, your " + $scope.selectedFleetFromId.brand + " representative will contact you soon";
}
$scope.showDriversFleets();
})
ファイルである私は私のアイデアは、あなたが、彼らは完璧でなくても少しさらに得るのを助ける願っています。 ：）
この前の記事では、あなたのデフォルトの質問ではありませんが、見る価値のある角度のある選択ボックスの使用について説明しています。 how to use ng-option to set default value of select element
ng-initで試しましたか？ – Sajeetharan
私はすでにng-initをデフォルトで設定することになっていました – NomaD