1.ng-src
2.ng-class
3.事件
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red{
color:red;
}
.fs50{
font-size: 50px;
}
</style>
</head>
<body ng-app="app" ng-controller="xmgController">
<!--
1.Angular 机制：
把所有DOM元素渲染完成之后，再去回头解析属于angular的东西
-->
<!---->
<!---->
<!--2.ng-class 控制类名
动态决定标签要不要添加class
ng-class="{key:value}"
value是bool类型
-->
<!--<p class="red">我是p标签</p>-->
<!--<p ng-class="{red:true}">我是p标签</p>-->
<!--<p ng-class="{red:true, fs50:true}">我是p标签</p>-->
<p ng-class="{red:isClass, fs50:isClass}">我是p标签</p>
<!--
3.事件处理 ng-click="事件方法" ng-mousedown
>定义事件
>在模型中实现事件方法
-->
<button ng-click="change1()">添加类</button>
<button ng-click="change2()">移除类</button>
</body>
<script src="js/angular.js"></script>
<script>
//1.创建模块
var app = angular.module('app', []);
//2.创建控制器
app.controller('xmgController', ['$scope', function ($scope) {
$scope.url = "images/ride.jpg";
//根据数据模型,动态决定标签要不要添加class
$scope.isClass = false;
//事件处理
//模型改变，直接影响到界面
$scope.change1 = function () {
$scope.isClass = true;
};
$scope.change2 = function () {
$scope.isClass = false;
}
}]);
//3.绑定模块 ng-app="app"
//4.绑定控制器 ng-controller="xmgController"
</script>
