2016-01-14 63 views
0

在我的html形式我有兩個不同類型的輸入與$scope變量相同的模型。相同的ng模型輸入收音機和編號

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

但是,如果我選擇的單選按鈕輸入之一,它不設置的值。

對同一範圍變量有兩個不同的輸入會導致衝突?

+0

做工精細這裏:https://jsfiddle.net/aiubian/ttayv25f/2/ –

+0

我在html中犯了一個錯誤,它是'input =「number」'而不是'input =「text」' – tvieira

+0

您是否讀過控制檯錯誤?它說「預計'16是一個數字」。您的值是字符串,不能在數字「輸入」中顯示。 –

回答

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