Angularjs - 使用ng-options填充选择框

时间:2013-08-26 13:27:31

标签: angularjs

我有一个json对象,如下所示

keyword = {
    application: ["Athena","EWindow","EWS","FACT","FTP","Hardware","PEN","Hermes","Infrastructure","LNG Tracker","M2M","Maintenance","Microsite","Oracle","Platts.com","PMC","PTO Task","Sametime","Third Party Data","User Error","Vendor","Web Channels","XML-DD","Customer Request","Mark Logic","SBB","Market Engagement Form","Lotus Notes Database","Oracle11i","External News","Stringers","PRP","Kingsman","Hermes-1"],
    incidentType: ["Publishing Failure","Brand Damage","Security Failure","Content Creation Failure","Internal failure","External Failure","System Failure","Operational Failure","Editorial Failure","Content inaccuracy","Process Failure","Application Issue","Infrastructure Issue","User Issue","Other","Resend","Data Send validation","Customer issue"],
    incidentEnvironment: ["Production","Non-Production","Others"],
    incidentPriority: ["Low","Medium","High","Critical"],
    incidentLocation: ["Asia Pacific","Europe","New York","New Jersey","Houston","Washington DC","Others"],
    incidentStatus: ["Initiation","Work In Progress","Completed","On Hold","Closed","Cancelled"],
    incidentCategory: ["ActiveX","Checkin","Checkout","CKEditor","Corrupt Story","Delete Story","Delivering Content","Download-Upload","Filter","Graph-Rich Media","IE Cache","IE Setting","Indicia","InDesign","Infrastructure","Ingest(Table)","Other","PDF","Publish","Search","Table","User Issue"],
    incidentTicketTools: ["BMC Remedy"],
}
<div class="col-lg-3">
    <select name="txt_inc_Status" class="form-control input-sm" required>
        <option selected disabled>
            -- Select Status --
        </option>
        <option ng-repeat="incidentStatus in keywords.incidentStatus" value="{{incidentStatus}}">
            {{incidentStatus}}
        </option>
    </select>
</div>

我需要在选择框中填充这些值。例如:Keywords.application in application选择框等等。

之前我使用ng-repeat来构建选项。但我知道不建议这样做。

所以我试图使用ng-option但是在填充这个问题上遇到了困难。有人可以帮我吗?

此外,我需要为这些选择框选择默认值(随机)。怎么能实现。当我使用ng-repeat

时,它无法正常工作

1 个答案:

答案 0 :(得分:2)

您可以使用

<div ng-repeat="(key, value) in keywords">
    <select ng-options="item for item in value" ng-init="index = getRandomIndex(value)" ng-model="value[index]">{{item}}</select>
</div>

与获取当前数组

的随机索引的函数一起使用
$scope.getRandomIndex = function(item){
    var index = Math.floor((item.length * Math.random()));
    return index;
}

DEMO