2017-08-15 24 views
0

ng-optionsを使用してサーバからselectオプションを取得している最中に--select--を最初のオプションとして初期化するにはどうすればよいですか?それはワークアウト..ドロップダウンリストで '--Select--'を初期化する

html要素

<select ng-options="item as item.approver1_name for item in request.approver1_data track by item.id" id="selectform" ng-model="selected_approver1_email" > 

私は承認者のリストを取得することはできていませんでした。しかし、私はちょうど、アレイ

$scope.approver1_data.push({ 
     id: '-1', 
     name: '--Select--' 
    }); 

DEMOにデフォルトのオブジェクトを追加し、あなたはデフォルト値を設定するには、NG-INITを使用することができます

答えて

0

..デフォルトとして - 選択 - オプションを追加する必要があります

angular.module('ngrepeatSelect', []) 
 
    .controller('ExampleController', ['$scope', function ($scope) { 
 
    $scope.approver1_data = [ { 
 
     id: '1', 
 
     name: 'Option A' 
 
    }, { 
 
     id: '2', 
 
     name: 'Option B' 
 
    }, { 
 
     id: '3', 
 
     name: 'Option C' 
 
    }]; 
 
    $scope.approver1_data.push({ 
 
     id: '-1', 
 
     name: '--Select--' 
 
    }); 
 
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="ngrepeatSelect"> 
 
    <div ng-controller="ExampleController"> 
 
     <form name="myForm"> 
 
      <label for="repeatSelect">Angular select:</label> 
 
<select name="repeatSelect" 
 
    id="repeatSelect" 
 
    ng-model="repeatSelect" 
 
    ng-init=" repeatSelect = '-1'" 
 
    ng-options="option.id as option.name for option in approver1_data">   
 
</select> 
 
     </form> 
 
     <br/> <tt>Selected value: {{repeatSelect}}</tt> 
 

 
    </div> 
 
</div> 
 
<br/>

1

あなたはこの

を行うことができます

ここでHTML

<div ng-controller="MyCtrl"> 
    <select ng-options="region.code as region.name for region in regions" ng-model="region"> 
    <option style="display:none" value="">--select--</option> 
    </select> 
    <br>selected: {{region}} 
</div> 

コントローラ

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

function MyCtrl($scope) { 
    $scope.regions = [ 
     { 
     name: "Alabama", 
     code: "AL"}, 
    { 
     name: "Alaska", 
     code: "AK"}, 
    { 
     name: "American Samoa", 
     code: "AS"}, 
     ]; 
} 

は、あなたがさらに試すことができているJSFIDDLE作業へのリンクです。

関連する問題