清除ng-model，然后用新值更新ng-model

Question

Angular and Ionic Application

我有一个有很多<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>相同的liveEarth，但它将'Other'分配给ng-model，然后用户必须在输入其值之前删除输入值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
  }
}