CODEWITHSUNDEEP
javascriptformsangularjs
josh
josh

Reputation: 553

How to set default and changeable values for an Angular.js form

I have a basic form set up, with bindings via angular.js. Selecting and changing values displays and updates fine when I have no default set. What I can't seem to do is set default values that can be changed.

I have a controller defined with basic values (take for example a set of radio buttons with a default value) :

function Contact($scope) {

    $scope.contact = 
   {
        'website'       : '.com'
    }

};

And my form:

<form action="#" method="post" ng-controller="Contact">

 <input ng-model="contact.website" value=".com" id="com" type="radio" name="website">
 <label class="radio-label" for="com">website.com</label>

 <input ng-model="contact.website" value=".fr" id="fr" type="radio" name="website">
 <label class="radio-label" for="fr">website.fr</label>

 <input ng-model="contact.website" value=".br" id="br" type="radio" name="website">
 <label class="radio-label" for="br">website.br</label>
</form>

Which works in setting the default value. But when I click on one of the other options, the corresponding {{ contact.website }} doesn't change.

What am I missing?

Upvotes: 0

Views: 2285

Answers (1)

Akallabeth
Akallabeth

Reputation: 343

I've built a jsfiddle with your example and seems to work, unless I didn't understand your question

<div ng-app="app" >
<form action="#" method="post" ng-controller="Contact">

 <input ng-model="contact.website" value=".com" id="com" type="radio" name="website">
 <label class="radio-label" for="com">website.com</label>

 <input ng-model="contact.website" value=".fr" id="fr" type="radio" name="website">
 <label class="radio-label" for="fr">website.fr</label>

 <input ng-model="contact.website" value=".br" id="br" type="radio" name="website">
 <label class="radio-label" for="br">website.br</label>
     <p>{{contact.website}}</p>
</form>
</div>

See if it's what you mean...

Upvotes: 1

Related Questions