DB内の値に基づいてドロップダウン値を選択してください

Question

私は角型JSを初めて使用しています。私は値を持つ静的オプションが存在するドロップダウンボックスを持っています。 条件に基づいて、データベースの値と一致するデフォルト値を選択する必要があります。どのように達成することができますか？ model = "TemplateObj.IsActive"は、DataBaseのint値が0,1または2です。

<label class="">STATUS</label> 
 
<select class="form-control input-sm" style="border: none" required ng-model="TemplateObj.IsActive" > 
 
<option value="2">In Development</option> 
 
<option value="1">Active</option> 
 
<option value="0">InActive</option> 
 
</select>

Answer 1

HTML selectの代わりにngOptionsを試してください。

DEMO

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

 
myApp.controller('MyCtrl',function($scope) { 
 
    
 
    $scope.status = [{ 
 
     title: 'In Development', 
 
     value: 2 
 
    }, { 
 
     title: 'Active', 
 
     value: 1 
 
    }, { 
 
     title: 'Inactive', 
 
     value: 0 
 
    }]; 
 
    
 
    $scope.TemplateObj = { 
 
    "IsActive": 1 
 
    } 
 
    
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <select ng-model="TemplateObj.IsActive" ng-options="option.value as option.title for option in status"></select> 
 
</div>

Answer 2

ステータスの配列とng-optionsディレクティブを使用してください。構文は初心者のために少し複雑に見えるかもしれませんが、あなたはいつかそれを学びます：value as title for element in array

JS：

$scope.statuses = [{ 
    title: 'In Development', 
    value: 2 
}, { 
    title: 'Active', 
    value: 1 
}, { 
    title: 'Inactive', 
    value: 0 
}]; 

をHTML：

<select ng-model="TemplateObj.IsActive" ng-options="status.value as status.title for status in statuses"></select> 

ここでは、実施例とjsfiddleです。

Answer 3

オプションは、ng-optionsディレクティブを使用することです。

ドキュメントはhereであり、参考にできる数多くの例があります。