清除NG-模型，然後更新NG-模型，新的價值

Question

角和離子應用

我有了很多<select>元素的一種形式，形式爲用戶提供了從列表中選擇或if the <option> = 'Other' then I show another <input>進入值。然後我將該值保存到另一個ng-model。

<select data-ng-model="minor.tests.liveEarth" 
       name="minorTestLiveEarth" 
       required> 
      <option></option> 
      <option>>200</option> 
      <option>>299</option> 
      <option>>500</option> 
      <option>>1000</option> 
      <option>Other</option> 
     </select> 
     </label> 
     <label class="item item-input item-stacked-label" ng-show="minor.tests.liveEarth === 'Other'"> 
     <span class="input-label">Please Specify</span> 
     <input type="text" 
       placeholder="live earth other" 
       ng-maxlength="10" 
       data-ng-model="minor.tests.liveEarthOther" 
       name="minorTestLiveEarthOther"> 
     </label> 

我最初使用的是<datalist>，但不顯示在iOS上。

我分配給liveEarthOther一樣<select>活樂地球但它已經分配到NG-模型，則用戶輸入其值之前刪除輸入值Other'Other'。

我已經找了一個組合框控件，但沒有找到一個能正常工作的控件。

我怎麼能把它變成一個指令或任何可以執行重命名而不需要用戶刪除值的東西。

我想在我正在構建的應用程序中多次使用此功能。

Answer 1

您可能通過重複使用ngModel而使事情過於複雜。如果更改值minor.tests.liveEarth，則會混淆您的選擇，因爲除給定值之外的任何內容都不會導致選擇任何內容。但是，如果您不要更改minor.tests.liveEarth那麼您必須在用戶填入文本輸入時將其刪除。這會然後也搞亂選擇框！

我會做的就是將文本輸入的值記錄到不同的變量中。保持ng-show="minor.tests.liveEarth === 'Other'"，因爲它是，但改變你輸入到

<input type="text" 
    placeholder="Fill in your other live earth" 
    ng-maxlength="10" 
    data-ng-model="tempVar" /> 

這樣的輸入將仍然被記錄，但選擇不會對ngModel變化而搞砸了。由於placeholder，用戶將知道他們必須填寫文本框。

在你的JS，你必須當表單沿線的提交創建一個驗證功能：

var validateLiveEarth = function(){ 
    if(minor.tests.liveEarth === "Other"){ 
    //check that tempVar meets validation 
    //assign tempVar to whatever form you're sending 
    } 
}