Angularjs 事件指令

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 58 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/358868

文章标签：

#javascript #ViewUI

本文通过两个实例介绍如何使用AngularJS实现点击事件及样式动态变化。第一个实例展示了如何定义一个点击事件触发函数并在控制台及弹窗中输出信息。第二个实例在此基础上增加了样式动态变化的功能，通过ng-class指令实现元素背景颜色的切换。

1. 点击事件

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>无标题文档</title>

    <script type="text/javascript" src="angular.min.js"></script>

</head>

<body>

<div ng-app="myApp">
 
    <div ng-controller="firstController">

        <div ng-click="run()">点击</div>

    </div>

</div>

<script type="text/javascript">

    var app = angular.module("myApp", []);

    app.controller('firstController',function($scope){

        $scope.text='phonegap中文网';
 
        $scope.run=function(){
 
            alert('run');

            console.log('run');

        }

    });

</script>
 
</body>

</html>

2. 样式 ng-class

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>无标题文档</title>

    <script type="text/javascript" src="angular.min.js"></script>

    <style>

        .red{background:red;}

        .yellow{background:yellow;}

    </style>

</head>

<body>

<div ng-app="myApp">
 
    <div ng-controller="firstController">

        <div ng-click="run()">点击</div>

        <div ng-class="{red:true}">{{text}}</div>

    </div>

</div>

<script type="text/javascript">

    var app = angular.module("myApp", []);

    app.controller('firstController',function($scope){

        $scope.text='phonegap中文网';
 
        $scope.run=function(){
 
            alert('run');

            console.log('run');

        }

    });

</script>
 
</body>

</html>