web-dev-qa-db-ja.com

AngularJSでのselectのプレースホルダー

Selectでプレースホルダーのアイデアを得ることができません。以下では、最初のエントリはまだ空白です。

<select class="form-control" ng-model="refData" required>
     <option ng-repeat="d in refData">
          {{d.value}}
     </option>
     <option value="" disabled hidden selected>View current values</option>
</select>
javascripthtmlcssangularjs
6
user441521

トランスクルージョンを使用して、無効にして選択するオプションを追加できます。その一般的なソリューションの詳細については、 「選択」ボックスのプレースホルダーを作成するにはどうすればよいですか？ を参照してください。こちらも参考のために ngSelect documentation です。

見る

<div ng-controller="MyCtrl">
    <select name="mySelect" 
            id="mySelect"
            ng-options="option.name for option in refData track by option.id"
            ng-model="selectedOption">
         <option value="" disabled selected>View current values</option>
     </select>
</div>

AngularJSアプリケーション

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {
    $scope.refData = [
      {id: '1', name: 'Option A'},
      {id: '2', name: 'Option B'},
      {id: '3', name: 'Option C'}
    ];

    $scope.selectedOption =  "";
});

JsFiddleデモ

20
lin
<select ng-model="testData" ng-options="test.name for test in testData">
        <option value="" selected>View current values</option>
</select>

与えられたテストデータは：

$scope.testData = [{"name" : "John"}, {"name" : "Micheal"}, {"name" : "Sarah"}];
2
Nehal Soni

Ng-optionsの使用をお勧めします

<select ng-options="d as d.value for d in refData" ng-model="refDataSelected"></select>

あなたのコントローラーで宣言することができます

$scope.refDataSelected = refData[0]

最初の要素をデフォルトオプションとして使用するには

ダミーテキストを作成する場合は、カスタムオブジェクトを使用してrefDataに新しいオブジェクトを追加し、-1などの非現実的なIDを指定できます。ただし、送信するときは、IDが-1かどうかを確認する必要があります。

1
necilAlbayrak