Użyj glyphicon, aby zaznaczyć wymagane pole za pomocą css - css, angularjs, twitter-bootstrap

W naszej aplikacji Angularjs ustawiamy wymagane pola dynamicznie (wymagane ng). Dlatego dodanie kompilacji jest dość skomplikowane * do etykiety za każdym razem, gdy jest to wymagane.

Teraz mamy inny pomysł. Możliwe jest zaznaczenie samego pola wejściowego zgodnie z wymaganiami. W ten post, znaleźliśmy część rozwiązania.

Były wymagane selektory CSS dla wymaganego pola, więc możemy ustawić obraz tła w taki sposób:

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 />

Ale w ten sposób potrzebujemy obrazu tła *, I to wydaje się być bardzo hacky. Zwłaszcza, jeśli istnieją różne rozmiary formularza, więc obraz ma różne rozdzielczości.

Niż znaleźliśmy to (sekcja oznaczona) przykład i wydaje się możliwe dodanie tekstu do pola wejściowego.

Pytanie brzmi: jak mogę to wszystko połączyć, abym umieścił glifphon z twitter-bootstrap po prawej stronie pola wejściowego, jeśli jest to wymagane bez edycji wszystkich moich formularzy?

Jej a jsFiddle. To może działać, ale problem polega na tym, że rozmiar tła nie jest utrzymany wszędzie.

Odpowiedzi:

Jak wspomniano w Angularjs wymagane gwiazdki, możesz dodać dyrektywę dla wymaganego atrybutu takiego jak ten:

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>

Opcja 2

Jak wspomniano w Użyj CSS, aby automatycznie dodać gwiazdkę „wymagane pole” do danych wejściowych, użycie obrazu tła jest również w porządku:

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/>

Uwaga: Ty nie może posługiwać się input:after aby utworzyć pseudo element po wejściu, ponieważ :before i :after „są renderowane wewnątrz samego kontenera jako element podrzędny i input nie może zawierać innych elementów, dlatego „nie jest obsługiwany”