CODEWITHSUNDEEP
htmlangularjsangular-ngmodel
Justin Case
Justin Case

Reputation: 787

Binding input with select tag angularjs

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.

Upvotes: 0

Views: 4962

Answers (1)

dave
dave

Reputation: 64657

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/

Upvotes: 3

Related Questions