クリア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では表示されません。

私は<select>ライブ・アースと同じにliveEarthOtherを割り当てられたが、それは'Other'、ユーザーが自分の価値を入力する前に入力値Otherを削除しなければならないNG-モデルに割り当てられています。

私はコンボボックスの種類のコントロールを探しましたが、正しく動作するコントロールが見つかりませんでした。

私はこれを、ディレクティブまたはユーザーが値を削除しなくても名前変更を実行できる適切なものにするにはどうすればよいでしょうか。

私が構築しているアプリケーションでこの機能を何度も使いたいと思います。

Answer 1

ngModelを再利用すると、作業が複雑になっている可能性があります。値minor.tests.liveEarthを変更すると、指定された値以外は何も選択されないため、選択を乱すことになります。しかし、がに変更されていない場合は、minor.tests.liveEarthに変更してください。ユーザーがテキスト入力を完了すると、削除する必要があります。これは次にの選択ボックスを台無しにするだろう！

私が行うことは、テキスト入力の値を別の変数に記録することです。そのままng-show="minor.tests.liveEarth === 'Other'"をしてくださいますが、入力がまだ記録されますが、選択はngModel変化に台無しにされることはありません

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

にこの道を、あなたの入力を変更します。 placeholderのため、ユーザーはテキストボックスに入力する必要があることを認識します。あなたのJSで

は、フォームがの線に沿って送信されたときに、検証関数を作成する必要があります：

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