如何为Angular.js表单设置默认值和可变值

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

本文关键字：默认值 设置 表单 Angular js      更新时间：2023-09-26

我有一个基本的表单设置，通过angular.js绑定。当我没有默认设置时，选择和更改值显示和更新很好。我不能做的是设置可以更改的默认值。

我有一个定义了基本值的控制器(例如一组具有默认值的单选按钮):

function Contact($scope) {
    $scope.contact = 
   {
        'website'       : '.com'
    }
};

和我的形式:

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

用于设置默认值。但是当我点击其他选项时，相应的{{ contact.website }}不会改变。

我错过了什么?

我已经用你的例子建立了一个jsfiddle，似乎可以工作，除非我不理解你的问题

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

相关文章：