Angular的ng-style用法

Question

Angular的ng-style用法

Wscats opened this issue 8 years ago · 0 comments

DEMO的效果如下

ng-style属性值需要传入对象
对象由CSS属性和值注册，即key=>value键值对
对象的格式如同DEMO中的这个对象

{
                "color": "#FFF",
                "background-color": "#FF7E4F",
                "font-size": "60px",
                "padding": "20px"
            }

全部的代码如下

<!DOCTYPE html>
<html ng-app="wsscat" ng-controller="catCtrl">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
        <title></title>
        <script type="text/javascript" src="ng.js"></script>
    </head>

    <body>
        <div ng-style="myStyle">Wsscat</div>
    </body>
    <script>
        var app = angular.module("wsscat", []);
        app.controller("catCtrl", function($scope) {
            $scope.myStyle = {
                "color": "#FFF",
                "background-color": "#FF7E4F",
                "font-size": "60px",
                "padding": "20px"
            }
        });
    </script>
</html>

有时候我们需要在DOM中直接把对象写在ng-style里面，里面还要绑定一些$scope的数据
那么我们可以这样，注意对象大括号里面用单引号，用双引号是无法运行的

<div ng-style="{
            'color': '#FFF',
            'background-color': '#FF7E4F',
            'font-size': '60px',
            'padding': '20px'
        }">Wsscat</div>

然后我们再复杂一点，绑定$scope给视图的数据，我们就可以再这样写

<div ng-style="{
            'color': '#FFF',
            'background-color': '#FF7E4F',
            'font-size': '60px',
            'padding': '{{padding}}'
        }">Wsscat</div>

在控制器定义好padding就可以了，这种情况在某些情况是会运用到的
$scope.padding = "30px";