输入无线电和数字的ng-model相同

时间:2016-01-14 18:37:47

标签: javascript angularjs

在我的html表单中,我有两种不同类型的输入,其中$scope变量与模型相同。

我有3个单选按钮和一个数字输入字段

<div class="form-group">
  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
      <input type="radio" ng-model="article.internal_memory" value="16" name="options" id="option1" > 16GB
    </label>
    <label class="btn btn-primary">
      <input type="radio" ng-model="article.internal_memory" value="32" name="options" id="option2" > 32GB
    </label>
    <label class="btn btn-primary">
      <input type="radio" ng-model="article.internal_memory" value="64" name="options" id="option3" > 64GB
    </label>
  </div>
  <input ng-model="article.internal_memory" id="internal-memory-input" placeholder="Outra" type="number" class="form-control">
</div>

但如果我选择其中一个单选按钮输入,则不会设置该值。

对同一范围变量有两个不同的输入会导致冲突吗?

1 个答案:

答案 0 :(得分:3)

使用 ng-value 代替value

喜欢这个

 <div class="form-group">
      <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary">
          <input type="radio" ng-model="article.internal_memory" ng-value="16" name="options" id="option1"> 16GB
        </label>
        <label class="btn btn-primary">
          <input type="radio" ng-model="article.internal_memory" ng-value="32" name="options" id="option2"> 32GB
        </label>
        <label class="btn btn-primary">
          <input type="radio" ng-model="article.internal_memory" ng-value="64" name="options" id="option3"> 64GB
        </label>
      </div>
      <input ng-model="article.internal_memory" id="internal-memory-input" placeholder="Outra" type="number" class="form-control">
    </div>

DEMO