AngularJS: On button click to capture selected tag value

Question

I have code HTMl as follows here i am trying to get the values from select tag:

<div class="padding">
        <div class="item item-divider calm-bg" style="color:#ffffff">
        Select Team to Go
        </div>
        <div class="list" >
            <label class="item item-input item-select ">
                <div class="input-label">
                    Select Team
                </div>
                <select ng-model="teamName" ng-options="f.id as f.name for f in devices">
                    <option value="" disabled> Select your team </option>
                </select>
            </label>
        </div>
    </div>

    <div class="clearfix"></div>
<div class="padding">
<div class="item item-divider calm-bg" style="color:#ffffff">
Select Form to Go
</div>
<div class="list">
     <label class="item item-input item-select">
         <div class="input-label">Select Team</div>

                <div ng-if="(!teamName)">
                    <select>
                        <option value="" disabled> Select your form</option>
                    </select>
                </div>
                <div ng-if="(teamName)">
                    <select ng-model="FormModel" ng-options="f.id as f.formname for f in forms | filter:{teamid:teamName}">
                        <option value="" disabled> Select your form </option>
                </div>
            </label>
        </div>
    </div>

    <div class="clearfix"></div>
    <div class="padding">
    <button ng-click="showToFillForm(FormModel)" class="button button-calm pull-right">Go!</button>
    </div>

I am trying to capture the forms ID using showToFillForm(Formid) but it is not capturing what to do to capture select tag value??

even after selection it does not contain anything. i am consoling it out it is showing undefined. — Shaggie
– Shaggie, Commented May 27, 2015 at 11:11
could you checked option value has rendered on html by inspect element? — Pankaj Parkar
– Pankaj Parkar, Commented May 27, 2015 at 11:13
for the option i can see in the debug that value attribute contain the form Id but is not coming in ng-model=FormId — Shaggie
– Shaggie, Commented May 27, 2015 at 11:13
could you add whole html? because looks like scope issue you had use ng-repeat or ng-if somewhere — Pankaj Parkar
– Pankaj Parkar, Commented May 27, 2015 at 11:14

Community · Accepted Answer · 2017-05-23 12:14:28Z

1

Just Try:

<select class="custom-select" ng-model="teamName" data-ng-options="f.id as f.name for f in devices" ng-change="updateTeamObject($index, teamName);">
         <option value="">Select Team</option>
    </select>

 <select class="custom-select" ng-show="teamName" ng-model="deviceForms" data-ng-options="o.id as o.formname for o in forms | filter:{teamid:teamName}">
          <option value="">Your team data</option>
      </select>

And in your button

<button ng-click="showToFillForm(deviceForms)" class="button button-calm pull-right">
  Go!
</button>

As per your previous question's JSON data

teamName is previous model of select box

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered May 27, 2015 at 11:12

Vineet

4,7153 gold badges25 silver badges42 bronze badges

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

11 Comments

Shaggie Over a year ago

there is a filter you have not noticed in the code. this one is populating all the forms

Vineet Over a year ago

Value attribute ? Will you please elaborate it for me ?

Shaggie Over a year ago

thing is i need formId of selected option so i am assigning value="{{formEach.Formid}}".

Vineet Over a year ago

I've been telling you the same. If you use ng-options then you don't need to use option's ng-repeat. The ng-options directive works like : value as label for element in array. You can see by using f.Formid as f.Formname you don't need to use <option value={{blah}}>

Vineet Over a year ago

You should see into your dom that how these directives are showing output over there. Please see your select box's output

|

Collectives™ on Stack Overflow

AngularJS: On button click to capture selected tag value

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related