Використовуйте glyphicon для позначення необхідного поля css - css, angularjs, twitter-bootstrap

У нашій програмі Angularjs ми динамічно встановлюємо необхідні поля (необхідні ng). Тому додати * до етикетки кожного разу, коли це потрібно.

Тепер у нас є інша ідея. Можливо, можна позначати саме поле введення по мірі необхідності. В цей пост, ми знайшли частину рішення.

Для обов'язкового поля були CSS-селектори, тож для цього ми можемо встановити фонове зображення:

input:required:valid {
background-image: url(valid.png);
background-position: right center;
background-repeat: no-repeat;
}
input:required:invalid {
background-image: url(invalid.png);
background-position: right center;
background-repeat: no-repeat;
-moz-box-shadow: none;
}

<p>Name:</p>
<input type="text" name="name" required />

Але використовуючи цей спосіб, нам потрібно фонове зображення *, І це, здається, дуже хакі. Тим більше, якщо є різні розміри форми, тому зображення має різні роздільні здатності.

Чим ми знайшли це (Розділ із позначкою) Наприклад, здається, що можна додати текст у поле введення.

Отже, питання полягає в тому, як я можу скласти це все разом, щоб я міг поставити гліфікон від twitter-bootstrap до правої сторони поля введення, якщо це потрібно без редагування всіх моїх форм?

Її а jsFiddle. Це може спрацювати, але проблема полягає в тому, що розмір фону не є підтримується скрізь

Відповіді:

Як згадувалося в Angularjs потрібні зірочки, ви можете додати директиву для необхідного атрибуту, як цей:

var app = angular.module("stack", []);

app.directive("required", function() {
return {
restrict: "A", // only for attributes
compile: function(element) {
// insert asterisk after elment
element.after("<span class="required">*</span>");
}
};
});

.required {
color: red;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular.js"></script>

<div ng-app="stack">

<input type="text" required />

</div>

Варіант 2

Як згадувалося в Використовуйте CSS для автоматичного додавання зірочки "обов'язкове поле" для формування входів, використання фонового зображення також чудово:

input[required],
select[required]{
background-image: url("http://i.imgur.com/zEIWMh4.png");
background-repeat: no-repeat;
background-position: right;
padding-right: 45px;
}

<label>Name</label>
<input type="text" required /><br/>

Примітка: Ти не можу використовувати input:after створити псевдоелемент після введення, оскільки :before і :after "надані знаходяться всередині самого контейнера як дочірній елемент і input не може містити інших елементів, отже, це "не підтримується"