清除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 
    } 
}