Dynamic css background AgularJs

English version
Indonesia version

English

Dynamic css background

In this example we define text box ng-modal value to the CSS background-color property value, so when the user type the color name, the text box background automatically changes to its color.

First you need agularjs files,if you don’t have, take it here 😎

Code

<div ng-app="" ng-init="clr='pink'">
  Type color : <input type="text" ng-model="clr">
<div class="box" style="background-color:{{clr}}"></div>
<script src="agularjs/angular1.4.8.min.js"></script>

Code for testing

<style>
    .box{
    width: 100%;
    height: 200px;
    }
</style>
<div ng-app="" ng-init="clr='pink'">
Type color : <input type="text" ng-model="clr">
<div class="box" style="background-color:{{clr}}"></div>
<script src="agularjs/angular1.4.8.min.js"></script>

Color for testing:

White
Silver
Gray
Black
Red
Maroon
Yellow
Olive
Lime
Green
Aqua
Teal
Blue
Navy
Fuchsia
Purple

Type color :

Indonesia

Dynamic css background

Dalam contoh ini kita mendefinisikan kotak teks Ng-Modal nilai ke latar belakang CSS background-color nilai properti, jadi ketika pengguna mengetikkan nama warna, kotak teks latar belakang secara otomatis berubah.

pertama kamu membutuhkan file agularjs , kalau kamu tidakpunya, ambil Disini 😎

Code

<div ng-app="" ng-init="clr='pink'">
  Type color : <input type="text" ng-model="clr">
<div class="box" style="background-color:{{clr}}"></div>
<script src="agularjs/angular1.4.8.min.js"></script>

Code untuk mencoba

<style>
    .box{
    width: 100%;
    height: 200px;
    }
</style>
<div ng-app="" ng-init="clr='pink'">
Type color : <input type="text" ng-model="clr">
<div class="box" style="background-color:{{clr}}"></div>
<script src="agularjs/angular1.4.8.min.js"></script>

wanna untuk mencoba:

White
Silver
Gray
Black
Red
Maroon
Yellow
Olive
Lime
Green
Aqua
Teal
Blue
Navy
Fuchsia
Purple

Type color :