Angular JS - CSS Stil Değiştirme

AngularJS ile CSS üzerinde değişiklikler yapabiliriz.

CSS'de bir divin arkaplan renginin rgb(r,g,b) özelliğini dinamik olarak değiştirebilecek bir uygulama yapalım.

R,G,B özelliği için bir TextBox oluşturduk ve kullanıcı 0 ile 255 arasında bir değer girecektir.

Kullanımı

R:
G:
B:
CSS ile Angular Kullanımı


Kaynak kodumuz
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

 <div ng-app="myModule" ng-controller="myCont">
  
        R: <input type="number" ng-model="R" name="name" value="" /><br />
        G: <input type="number" ng-model="G" name="name" value="" /><br />
        B: <input type="number" ng-model="B" name="name" value="" /><hr />
        <div style="border-style:solid;width:100px;height:100px;color:white;background-color: rgb({{R}},{{G}},{{B}});">
            CSS ile Angular Kullanımı
        </div>
    </div>

</body>
</html>
<script>
    var a = angular.module('myModule', []);
 
    a.controller('myCont', function ($scope) {
        $scope.R = 0;
        $scope.G = 0;
        $scope.B = 0;
    });
</script>

Örnek ile ilgili anlaşılmayan bir konu olduğunda yorumda belirtebilirsiniz.

Keyifli kodlamalar :)

Yorumlar

Yorum Gönder