Как мне требовать несколько полей ввода в AngularJS?
Я пытаюсь написать простую страницу с несколькими входами, которые должны быть required, чтобы не быть пустым.
Здесь код для этого (автономный):
<!DOCTYPE html>
<html>
<head>
<script src="/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller('myController', ['$scope', function($scope) {
}]);
</script>
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
Description: *<input type="text" id="input-description" ng-model="req-text" required></input><br/>
Order: *<input type="number" id="input-order" ng-model="req-number" value="100" step="100" required></input><br/>
</div>
</body>
</html>
Я надеялся, что это будет сделано, начиная с того, что текстовое поле пустым и красным (недействительным), а поле с номером 100 и зеленым (действительным).
Первое, что я пробовал, - это установить для ng-model входные данные на одну и ту же вещь, но это вызвало изменение номера поля в текстовом поле, когда оно было обновлено (но не наоборот).
Поскольку это явно не сработало, я попытался использовать разные модели для входов, как показано в моем коде. Однако теперь оба входа имеют значение 0 (даже текстовое поле, которое должно быть пустым), и оба входа не могут быть введены или отредактированы иным образом.
Что я делаю не так, и как я могу просто получить оба входа должен быть required отдельно угловым?
1 ответ
То, что вы делаете не так, прежде всего, использует нелегальные идентификаторы для моделей. req-number не является допустимым идентификатором для переменной. (помните, что все эти модели на самом деле называются $scope.variableName, представьте $scope.req-number). Следовательно, ваши входы сделаны только для чтения. Фактически вы можете увидеть это при просмотре консоли своего браузера.
Во-вторых, value атрибута html игнорируется для input в этом случае. Используйте функцию контроллера для установки значений по умолчанию для ваших моделей.
app.controller('myController', ['$scope', function($scope) {
$scope.req_number = 100;
}]);
....
<div ng-controller="myController">
Description: *<input type="text" ng-model="req_text" REQUIRED><br/>
Order: *<input type="number" ng-model="req_number" required><br/>
</div>
В качестве альтернативы вы можете использовать ng-init для ng-init модели. Однако, как упоминалось в @developer0333, это не рекомендуется, поскольку логика инициализации является частью бизнес-логики, и с развитием проекта может усложниться, а просто установить примитивные значения.
<input type="number" ng-model="req_number" ng-init="req_number=100" required><br/>
PS и небольшое примечание, закрывающие теги игнорируются для <input>
Ещё вопросы
- 1Моя реализация обнаружения столкновений не ведет себя нормально
- 0Ошибки malloc при передаче ссылок cv: Mat
- 0Как получить дескриптор окна виджета для передачи в win32 api MessageBox в Qt
- 0MySQL - лучшая практика для получения строк с количеством деталей
- 0Создание сохраненной страницы с помощью Javascript?
- 1C # WPF. Как динамически добавлять эллипсы в холст?
- 0Аккордеонные данные сетки
- 1Как найти значения Min и Max для строк в словаре при использовании DictReader в Python 3
- 0Асинхронный обратный вызов не был вызван в течение тайм-аута - модульное тестирование службы Typescript & Angular $ http
- 0Не могу знать поведение клика на отключенном элементе
- 0Ответ на запрос mysqli остается пустым, несмотря на соединение с базой данных
- 0Вам нужно беспокоиться о дублировании событий при использовании функции «on» в jQuery?
- 0Попытка использовать кнопку, чтобы установить значение в $ scope
- 1DropDownlist и список вопросов в c # ASP.net MVC
- 0on () не сработает, но все остальное работает?
- 0заменить оператор new на malloc
- 1Как создать массив из разных элементов enum
- 1Python3.5, Win32gui, Tkinter. Я не могу получить пиксель с экрана
- 0Изображения с веб-камеры в память на C ++
- 1добавление пути к файлу в Eclipse
- 1Как использовать DbNull.Value при условном присвоении значения столбца? [Дубликат]
- 0Показать ссылку в jquery datagrid
- 1React-родное приложение для Android, не показывающее локальные картинки / ресурсы
- 1обновить фрейм данных по индексам, возвращаемым запросом
- 1Настройки парсера DOM, чтобы избежать атаки XML Injection
- 0Как передать выбранные значения в JavaScript
- 1Gensim Word2Vec выбирает второстепенный набор векторов слов из предварительно обученной модели
- 1AssertAlmostEqual для значения в dict
- 0Jquery выберите по ключевому свойству
- 0Перецентрировать веб-страницу в CSS / HTML
- 0Как выбрать ресурс с условием выполнения двух отношений в объединенной таблице
- 1Android, как я могу выбрать изображение с камеры или галереи одновременно с одним намерением
- 1Строка соответствия после новой строки
- 0Я хочу получать вложения в электронное письмо от формы
- 1правильный ООП и гибкость между классами в Java
- 0Автоматически включая несколько исходных файлов с -gcc?
- 1Javascript извлечь регулярное выражение из строки
- 0получить все узлы из многоуровневого хэша в Perl
- 0getelementbyClassName в angularjs
- 0AngularJS Directive Countup.JS получить данные из модели
- 1Как правильно читать числовые данные (сохраненные в текстовом файле) в Python?
- 0Как я могу использовать jQuery для обновления поля в моей модели рельсов?
- 0Facebook API - реализация приглашения друзей, как на Quora
- 1Как нанести несколько второстепенных сюжетов на фоновое изображение с помощью matplotlib?
- 0Два или более подключения к MySQL одновременно выдают ошибку Acces Denied
- 1Как сохранить постоянные кнопки относительно изменения размера метки в PyQt4
- 1Свойство Java «user.home» в Windows 7 с сетевыми профилями пользователей
- 1Проверенный тип свойства существует, но все еще появляется ошибка?
- 1Как ввести автоматически сгенерированные классы?
ng-model. Я не осознавал, что (1) это будет переменная в области видимости, и (2) что эта переменная будет значением ввода. Я думал, что модели были чем-то совершенно другим.ngInitне должна использоваться в этом случае, так как она есть в docs: docs.angularjs.org/api/ng/directive/ngInit . Запустите значение в контроллере в этом случае.