AngularJs动态增减class样式——ng-class

来源：互联网发布：生意参谋免费版知乎编辑：程序博客网时间：2024/04/30 00:22

使用ng-class可以实现动态地增减样式：

<!DOCTYPE html><html ng-app="formExample"><head>    <meta charset="UTF-8">    <title></title>    <script src="../js/angular.js"></script>    <script>        angular.module('formExample', [])                .controller('FormController', ['$scope', function($scope)                {                }]);    </script>    <style>        .strike {            text-decoration: line-through;        }        .bold {            font-weight: bold;        }        .red {            color: red;        }    </style></head><body><div>    <p ng-class="{strike: deleted, bold: important, red: error}">通过映射的方式</p>    <input type="checkbox" ng-model="deleted">添加strike样式<br>    <input type="checkbox" ng-model="important">添加bold样式<br>    <input type="checkbox" ng-model="error">添加错误样式    <hr>    <p ng-class="style">使用字符串的方式</p>    <input type="text" ng-model="style" placeholder="输入 bold、 strike 或 red">    <hr>    <p ng-class="[style1, style2, style3]">使用数组的方式</p>    <input ng-model="style1" placeholder="输入: bold, strike 或 red"><br>    <input ng-model="style2" placeholder="输入: bold, strike 或 red"><br>    <input ng-model="style3" placeholder="输入: bold, strike 或 red"><br>    <hr/></div></body></html>

0 0