Angularjs - Populate select box using ng-options

Question

I have a json object as below

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>

I need to populate these values in select boxes. Ex: Keywords.application in application select box and so on.

Earlier I used ng-repeat to construct options. But I came to know that it is not advised to do so.

So I am trying to use ng-option but facing difficulties in populating this. Can somebody help me on this?

Also I need to select a default value (random) for these selectbox. How can that be achieved. It didn't work when I used ng-repeat

Add ng-options="incidentStatus in keywords.incidentStatus" inside your select tag. — tymeJV
– tymeJV, Commented Aug 26, 2013 at 13:39
Please also note that your json object is titled keyword but your binding html is showing keywords, didn't know if that was a typo or not — jnthnjns
– jnthnjns, Commented Aug 26, 2013 at 13:40
I tried below code similar to yours but it dint work. It is "keywords" <div class="col-lg-3"> <select name="txt_inc_Status" ng-options="incidentStatus in keywords.incidentStatus" class="form-control input-sm" required> </select></div> — Saravanan
– Saravanan, Commented Aug 27, 2013 at 5:30

zs2020 · Accepted Answer · 2013-08-26 16:26:42Z

2

You can use

<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>

together with a function to get the random index for current array

$scope.getRandomIndex = function(item){
    var index = Math.floor((item.length * Math.random()));
    return index;
}

DEMO

answered Aug 26, 2013 at 16:26

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Saravanan Over a year ago

I tried below code similar to yours but it dint work. <div class="col-lg-3"> <select name="txt_inc_Status" ng-options="item for item in keywords.incidentStatus" class="form-control input-sm" required> </select></div>

zs2020 Over a year ago

@saravanan that is why I created a demo for you. You should not just wait for answer, try to figure it out by yourself. That working demo contains everything you need to understand it.

Saravanan Over a year ago

Thanks. I tried that too but without ng-repeat. I dont want to use ng-repeat to construct select box because it will be located in different place in html. I just want to populate options from the json. I tried below in the jsfiddle and it dint work. <select ng-options="item for item in keywords.application">{{item}}</select>

Collectives™ on Stack Overflow

Angularjs - Populate select box using ng-options

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related