2016-05-16 9 views
0

私の選択タグにユーザーの選択肢を持たせるためにng-optionsを使用しています。すべてが完璧に機能しますが、オプションを最初に選択した後はデフォルトの空白値がなくなります。もう一度空白の値に戻したいのですが?それはどうやってできますか?その空白の値を保持するにはどうすればよいですか?ここでオプションを選択するとAngularJS ng-optionsがデフォルトの空白値を削除しました

は、私のコードの例です。ここで

<!DOCTYPE html> 
<html ng-app="app"> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    </head> 

    <body ng-controller="myController"> 
    <h1>Hello World!</h1> 
    <select ng-model="mySelection" name="" id="" ng-options="x.value as x.label for x in myOptions"> 

    </select> 
    </body> 

</html> 

<script> 
    var app = angular.module('app', []); 
    app.controller('myController', function($scope){ 
    $scope.myOptions = [{ 
     "value": null, 
     "label": null, 
    },{ 
     "value": "First", 
     "label": "First", 
    },{ 
     "value": "Second", 
     "label": "Second", 
    },{ 
     "value": "Third", 
     "label": "Third", 
    }] 
    }); 
</script> 

はplunkerです:http://plnkr.co/edit/5f17YxRfWFI4g40t3NEf?p=preview

+0

こんにちは値を取得するnullコール関数 –

+0

どのような機能ですか?コードをデモできますか? –

答えて

2

使用

<select ng-model="mySelection" name="" id="" ng-options="x.value as x.label for x in myOptions"> 
    <option value=""></option> 
    </select> 

は、ダミーのヌルオブジェクトを使用して 'myOptions' を汚さないでください、 APIはあなたに同じことを返さないからです。あなたは上記のようにプレゼンテーション層でそれを処理する必要があります。節約しながらの使用が空選択した場合(適切に取り扱えば)、それは

はまた、あなたはちょうどあなたのオプションに空白のオプションを追加し、デフォルトで空白を選択し、この

<option value="">---select---</option> 
+0

WOW!ありがとう!このトリックは決して知らなかった! :) –

+0

ようこそ。あなたが満足している場合、あなたは答えを受け入れることができます:) – CodingNinja

1

のようなものを持つことができ、ヌルとして保存されます以下のような:

<!DOCTYPE html> 
<html ng-app="app"> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    </head> 

    <body ng-controller="myController"> 
    <h1>Hello World!</h1> 
    <select ng-model="mySelection" name="" id="" ng-options="x.value as x.label for x in myOptions"> 

    </select> 
    </body> 

</html> 

<script> 
    var app = angular.module('app', []); 
    app.controller('myController', function($scope){ 
    $scope.mySelection = ''; 
    $scope.myOptions = [{ 
     "value": "", 
     "label": "", 
    },{ 
     "value": "First", 
     "label": "First", 
    },{ 
     "value": "Second", 
     "label": "Second", 
    },{ 
     "value": "Third", 
     "label": "Third", 
    }] 
    }); 
</script> 

ここでは、空白のオプション

{ 
    "value": "", 
    "label": "", 
} 

を追加し、THAを選択しますt空のオプション$scope.mySelection = '';

関連する問題