web-dev-qa-db-ja.com

angleJS-ng-optionsを使用して静的オプションを追加します

Ng-optionsを使用して、angularアプリのフォームのすべてのオプションを出力しています。データベースから直接値を取得して、国のリストを表示します。

<select ng-options="country.country for country in countries" ng-model="selectedCountry" ng-change="updateSelectedCountry(selectedCountry)" class="form-control">

ここで、ページが読み込まれると、選択には何も表示されません。つまり、プレースホルダーはありませんが、「国」リストに追加せずに「どこでも」のような静的な値を印刷したいと思います。

私はこれを試しました：

<select ng-options="country.country for country in countries" ng-model="selectedCountry" ng-change="updateSelectedCountry(selectedCountry)" class="form-control">
<option>Anywhere</option>
</select>

しかし、それは機能していません

誰かがこれを解決する方法を知っていますか？

ありがとう

javascriptangularjsng-options
7
Spearfisher

あなたはいつもこれをすることができます：

<select ng-model="selectedCountry" ng-change="updateSelectedCountry(selectedCountry)" class="form-control">
    <option>Anywhere</option>
    <option ng-repeat="country.country for country in countries">{{country.country}}
    </option>
</select>

これが私の フィドル の例です

お役に立てれば！

9
hassassin

これはおそらく遅い投稿ですが、新しいスコープがng-repeatで作成されるため、オーバーヘッドが増えるため、この場合のようにng-optionsが適している場合はng-repeatを使用しないでください。

あなたの問題の解決策はangular docsによく書かれていて、あなたが必要とするものは幾分似ています

<select ng-options="country.country for country in countries"
        ng-model="selectedCountry"
        ng-change="updateSelectedCountry(selectedCountry)"
       class="form-control">
   <option value="" disabled>Anywhere</option>
</select>

これにより、angular value=""を使用してnull値を設定し、その値の後に反復を開始します。

16
Cozzbie

hassassin のフィドルを少し調整しました。これは、ng-optionsがどのように機能することを意図しているかに少し一致しています。 例

var myApp = angular.module('myApp', [])
    .controller('TestController', ['$scope', function ($scope) {
        $scope.data = [1,2,3];
        $scope.sel = '';
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="TestController">
    {{sel}}
    <select ng-model="sel" ng-options="val for (key , val) in data">
        <option value="">any</option>
    </select>
</div>
  </div>
1
Carson Drake

カスタムオプションタグにvalue属性を設定する必要があります。この例では、次のようになります。

<select ng-options="country.country for country in countries" ng-model="selectedCountry" ng-change="updateSelectedCountry(selectedCountry)" class="form-control">
  <option value='anyValueForThisOption'>Anywhere</option>
</select>
0
Fabricio