Angularのng-optionsのデフォルト値の選択

Question

2つのドロップダウンがあり、1つは他と依存しています。もともとng-repeatを使ってコードを作成しましたが、ng-optionsを使う方が効率的です。しかし、切り替え時には、デフォルトでng-selectedを使用することはできません。

ng-optionsでデフォルトオプションを設定する方法は異なりますが、カスタマイズしたオプションには<option value="">Select Something Here</option>を使用するか、データセットから直接選択してください。しかし、私の価値は変わります。ここで

はNGリピートを使用して作業plunkerである：ここで

http://plnkr.co/edit/Ie4VDDlrwSUSqIq7laoa?p=preview

はNG-オプションを使用して、デフォルトの欠落plunkerです：

http://plnkr.co/edit/TGoWTMqOuJnWKNTUARWI?p=preview

デフォルト値は$scope.defnumする必要がありますこれは私のドロップダウンの値とは異なるデータセットから取られているので、デフォルトのDefCom = defnumを使いたいと思っています。

$scope.defcom = 4; 
var original_defcom = $scope.defcom; 

とテンプレートでng-init="original_defcom"を使用して：私は、NG-initをコントローラで元の変数を割り当てることによってを使用してこれをやってみました。

とNG-モデルで、でも<option>タグでラップすることは

Answer 1

そして、NG-オプションで

<select ng-model="defcom" 
    ng-options="opt.DefCom as opt.DefCom for opt in acct_info | filter:{Req:'MUST'}:true" > 
</select> 

これを行う、あなたが合うようにデ$ scope.defcomタイプを変更する必要がありますアレイ。プランナーでは、変数はNumberであり、配列はStringsでいっぱいです。そのうちの1つを変更する必要があります。私がどこにいたら、配列内のオブジェクトのプロパティのタイプを変更したいと思います。 ng-optionsは自動的に数値を解析します。

これはあなたのplunkerのaftersいくつかの変更のバージョンです：

http://plnkr.co/edit/tIeDEC8MxfcvnRrc0Njh?p=preview

Answer 2

はこのようにしてみてください。

とこれに変更：$scope.defcom = "4";

<select ng-model="defcom" ng-options="opt.DefCom as opt.DefCom for opt in acct_info | filter:{Req:'MUST'}:true" >> 

// Code goes here 
 

 
angular.module("app", []) 
 
    .controller("MainCtrl", function($scope) { 
 
    $scope.test = "This is a test"; 
 
    $scope.defcom = "4"; 
 
    var original_defcom = $scope.defcom; 
 
    var original_com = $scope.com; 
 
    
 
    $scope.acct_info = [ 
 
     { 
 
     "Req": "MUST", 
 
     "DefCom": "1" 
 
     }, 
 
     { 
 
     "Req": "NoMUST", 
 
     "DefCom": "5" 
 
     }, 
 
     { 
 
     "Req": "MUST", 
 
     "DefCom": "4" 
 
     }, 
 
     { 
 
     "Req": "MUST", 
 
     "DefCom": "7" 
 
     } 
 
    ]; 
 
    
 
    $scope.cust_info = [ 
 
     { 
 
     "Customer": "1", 
 
     "Com": "1" 
 
     }, 
 
     { 
 
     "Customer": "2", 
 
     "Com": "1" 
 
     }, 
 
     { 
 
     "Customer": "3", 
 
     "Com": "4" 
 
     }, 
 
     { 
 
     "Customer": "4", 
 
     "Com": "4" 
 
     }, 
 
     { 
 
     "Customer": "5", 
 
     "Com": "7" 
 
     }, 
 
     { 
 
     "Customer": "6", 
 
     "Com": "7" 
 
     }, 
 
     { 
 
     "Customer": "7", 
 
     "Com": "7" 
 
     } 
 
    ]; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <h1>Hello Plunker!</h1> 
 
    <div ng-controller="MainCtrl"> 
 
     <p>{{ test }}</p> 
 
     <select ng-model="defcom" ng-options="opt.DefCom as opt.DefCom for opt in acct_info | filter:{Req:'MUST'}:true" >> 
 
    </select> 
 
    
 
    </div> 
 
    </div>

`