ページ更新時にデフォルトで選択された項目を取得する

Question

私は、MongoDBから取得した都市名を持つ選択ボックスを持つMEANスタック上にWebサイトを構築しました。今度はHTMLでこれらの名前を表示するためにAngularを使用しますが、ページがロードされたときにデフォルトの名前を表示して、少なくともいくつかの情報が表示されるようにします。私はすでに何を使うことができるのか調べてきましたが、ng-initが提案されましたが、これは私にとってはうまくいかなかったのです。他のオプションはありますか？

これは私のHTMLです：

<div ng-controller="cityCtrl"> 
    <div class="container plumbers"> 
    <div class="searchbox"> 
     <div class="plumber-by-city col-sm-12" style="margin-bottom: 20px;"> 
     <div class="title-1">Zoek op plaatsnaam</div> 
      <select ng-model="selectedItem" ng-options="item as item.city for item in items"></select><span class="fa fa-caret-down"></span> 
     </div> 
    </div> 
    </div> 
</div> 

これは、DBからデータを取得し、私の角度です：

app.controller('cityCtrl', function($scope,$http){ 
    $scope.items = []; 

    $http.get('/getdata').then(function(d){ 
    console.log(d); 
    $scope.items = d.data; 
    },function(err){ 
    console.log(err); 
    }); 
}); 

Answer 1

あなたはこのようなselectedItemの値が、その後がある場合はそのng-selectedと||演算子を使用することができますそれが選択されるか、または配列の最初のオブジェクトがデフォルトで選択されます。

var app = angular.module("MyApp", []).controller("cityCtrl", function($scope) { 
 
$scope.items = [{city: 'abc'}, {city: 'cde'}, {city: 'fgh'}]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="MyApp" ng-controller="cityCtrl"> 
 
    <div class="container plumbers"> 
 
    <div class="searchbox"> 
 
     <div class="plumber-by-city col-sm-12" style="margin-bottom: 20px;"> 
 
     <div class="title-1">Zoek op plaatsnaam</div> 
 
      <select ng-selected="selectedItem = selectedItem || items[0]" ng-model="selectedItem" ng-options="item as item.city for item in items"></select><span class="fa fa-caret-down"></span> 
 
     </div> 
 
     {{selectedItem}} 
 
    </div> 
 
    </div> 
 
</div>