【问题标题】:How to set the default value for radio buttons in AngularJS?如何在 AngularJS 中设置单选按钮的默认值?
【发布时间】:2013-03-27 20:30:37
【问题描述】:

我需要建立一个系统来根据所选票数更改总价。我创建了一些单选按钮来选择票的数量。问题是默认值未设置,加载时结果为空。

<input type="radio" ng-model="people" value="1" checked="checked"><label>1</label>
<input type="radio" ng-model="people" value="2"><label>2</label>
<input type="radio" ng-model="people" value="3"><label>3</label>
<ul>
  <li>{{10*people}}€</li>
  <li>{{8*people}}€</li>
  <li>{{30*people}}€</li>
</ul>

Please see my jsfiddle.

【问题讨论】:

  • 你想设置什么默认值
  • 对于任何使用 {{$index}} 作为值的人的旁注,您的模型需要对初始值“1”进行字符串化。

标签: angularjs


【解决方案1】:

使用ngInitpeople 设置默认值

<div ng-app>
    <div ng-init="people=1" />
        <input type="radio" ng-model="people" value="1"><label>1</label>
        <input type="radio" ng-model="people" value="2"><label>2</label>
        <input type="radio" ng-model="people" value="3"><label>3</label>
    <ul>
        <li>{{10*people}}€</li>
        <li>{{8*people}}€</li>
        <li>{{30*people}}€</li>
    </ul>
</div>

演示:Fiddle

【讨论】:

  • 你也可以在控制器内部设置scope.people=1,这是docs.angularjs.org/api/ng.directive:ngInit中描述的推荐方式
  • @Arun,如果值有字符而不是数字怎么办。那么ng-init 的代码是什么样的呢?
  • @MrSuS people='chars'
  • 使用ng-init 是不好的做法。这种方法仅对第一次填充的表单有效。如果你有值并将它们分配给模型绑定器,ng-init 将覆盖你的值。
  • 如果我使用ng-value 和默认收音机我想使用ng-value = "" 会怎样,因为我稍后会使用该模型过滤列表,而默认过滤器不应该过滤任何东西,因此是空字符串?
【解决方案2】:
<div ng-app="" ng-controller="myCntrl">    
        <input type="radio" ng-model="people" value="1"/><label>1</label>
        <input type="radio" ng-model="people" value="2"/><label>2</label>
        <input type="radio" ng-model="people" value="3"/><label>3</label>
</div>
<script>
    function myCntrl($scope){
        $scope.people=1;
    }
</script>

【讨论】:

    【解决方案3】:

    为什么不只是ng-checked="true"

    【讨论】:

    • 因为它会直观地检查单选按钮,但不会像您通过浏览器单击单选按钮那样设置“人”的值。
    • 答案部分不是提问的好地方。这在接受答案的 cmets 中会更好。
    【解决方案4】:

    在 Angular 2 中,我们可以这样设置单选按钮的默认值:

    HTML:

    <label class="form-check-label">
              <input type="radio" class="form-check-input" name="gender" 
              [(ngModel)]="gender" id="optionsRadios1" value="male">
              Male
    </label>
    

    在组件类中,将“性别”变量的值设置为等于 单选按钮:

    gender = 'male';
    

    【讨论】:

      【解决方案5】:
      <input type="radio" name="gender" value="male"<%=rs.getString(6).equals("male") ? "checked='checked'": "" %>: "checked='checked'" %> >Male
                     <%=rs.getString(6).equals("male") ? "checked='checked'": "" %>
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2021-01-06
        • 1970-01-01
        • 2019-09-16
        • 1970-01-01
        • 2021-02-18
        • 2020-08-10
        • 2014-02-25
        • 2015-12-10
        相关资源
        最近更新 更多