Binding input with select tag angularjs

Question

I'm new to web designing and I'm trying to bind my input tag with my select tag using ng-model and angularjs. Ultimately, I want the user to choose an element out of an array and the placeholder for the input tag will have the value the user chose. The user can type something in the input box and the element inside the select tag will change also, just like an edit feature. Here's what my code looks like so far.

                <!-- Caregivers -->
            <div class="form-group">
                <label for="caregivers">Caregivers</label>
                <select class="form-control" id="caregivers">
                    <option ng-repeat="info in infos.Caregivers" value="info.Name">{{info.Name}}</option>
                </select>

                <label for="careName">Name</label>
                <input type="text" ng-model="info.Name" id="careName" placeholder="{{info.Name}}">

            </div>

The select table works fine, it's just the input box and select aren't binding. Any ideas on how to solve this problem? Thanks in advanced

EDIT:

Simply put, I want to know how to bind an input tag with a select tag(which uses ng-repeat) by using ng-model or any other type of data binding.

I dont know how to. I just want to know how to bind an input tag with a select tag that uses ng-repeat. Sorry if the question isn't clear — Justin Case
– Justin Case, Commented Jul 17, 2014 at 18:55

dave · Accepted Answer · 2014-07-17 19:06:00Z

3

I think I understand what you are going for. You should use ng-options for select elements, instead of ng-repeat on the options. Then you can have the text field have the ng-model of a property of the ng-model bound to the select.

<select ng-model="selected_caregiver" 
        ng-options="caregiver as caregiver.Name for caregiver in info.Caregivers"
        class="form-control" id="caregivers" />

<input type="text" 
       ng-model="selected_caregiver.Name" 
       id="careName" 
       placeholder="{{selected_caregiver.Name}}">

Fiddle: http://jsfiddle.net/fXs6e/

answered Jul 17, 2014 at 19:06

dave

65k6 gold badges81 silver badges98 bronze badges

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

Collectives™ on Stack Overflow

Binding input with select tag angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related