Очистить ng-модель, затем обновить ng-модель новым значением

Question

Очистить ng-модель, затем обновить ng-модель новым значением

0

Угловое и ионное применение

У меня есть форма, в которой много элементов <select>. Форма предлагает пользователю выбрать из списка или, if the <option> = 'Other' then я 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-модели, которое затем пользователю нужно удалить входное значение Other перед вводом их значения.

Я искал элемент управления combobox, но не нашел тот, который работает правильно.

Как я могу превратить это в директиву или любую вещь, подходящую для выполнения переименования без необходимости удаления пользователя.

Я хочу использовать эту функцию много раз в приложении, которое я создаю.

StudentRik 18 авг. 2016, в 12:00

Источник

Теги:

ionic-framework

angularjs

1 ответ

Ещё вопросы

Federico Pettinella · Accepted Answer · 2016-08-18T14-11-00.000Z

Возможно, у вас слишком сложные вещи, повторно используя 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
  }
}

Спасибо за вашу помощь, это дало мне возможность проверить и назначить мою модель.