angular中的ng-click指令案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入门</title>
    <script src="node_modules/angular/angular.js"></script>
    <style>
        .bgc-red {
            background-color: red;
        }
    </style>
</head>
<body ng-app="s1.app">

<button class="{{currentBtn == 1 ? ‘bgc-red‘:‘‘}}" ng-click="setCurrent(1)">按钮1</button>
<button class="{{currentBtn == 2 ? ‘bgc-red‘:‘‘}}" ng-click="setCurrent(2)">按钮2</button>
<button class="{{currentBtn == 3 ? ‘bgc-red‘:‘‘}}" ng-click="setCurrent(3)">按钮3</button>
<button class="{{currentBtn == 4 ? ‘bgc-red‘:‘‘}}" ng-click="setCurrent(4)">按钮4</button>

<script>
    // 1. 定义一个我们自己的模块,
    // 第一个参数是:模块名,
    // 第二个参数:所依赖的其他的模块的名字的数组
    var app = angular.module(‘s1.app‘, []);
    // app.run是Angularjs版本的“入口函数”,我们的Angularjs框架加载完成之后,就会来执行这里的函数。
    // 其中有一点需要注意:$rootScope是Angularjs提供的“数据对象”,
    // 我们操作这个数据对象,就可以把变化同步到DOM上
    // 参数名是写死的,不要变。(Angularjs的回调函数的传参,很多地方是“只认名字,不认顺序”的)
    app.run(function ($rootScope) {
        $rootScope[‘msg‘] = ‘hello angular‘;
        $rootScope[‘cssClass‘] = ‘bgc-red‘;
        $rootScope[‘currentBtn‘] = 1; // 标识当前的按钮
        $rootScope[‘setCurrent‘] = function (current) { // 当按钮被点击之后,调用,设置当前的按钮
            $rootScope[‘currentBtn‘] = current;
        }
    })
</script>
</body>
</html>
时间: 09-30

angular中的ng-click指令案例的相关文章

Angular中的内置指令和自定义指令

NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减少DOM操作,实现数据绑定,与业务逻辑进行交互. How: 指令主要分为两种:内置指令和自定义指令,通过下面的例子,简单记录一下如何去使用. 内置指令 在官方API文档上罗列了很多指令,内置指令可以分为:普通指令 和 事件指令,他们都是作用于HTML之上的,通过添加属性的方式来实现的.简单看一下一些

Angular中ui-router实现路由嵌套案例

学习 ui-router 资料整理 对于Angular内置的路由是单路由视图,ui-router可以实现路由嵌套.后面将会有一个案例概括前面所有资料整理 学习 ui-router - 管理状态  http://bubkoo.com/2014/01/01/angular/ui-router/guide/state-manager/ 学习 ui-router - 状态嵌套和视图嵌套  http://bubkoo.com/2014/01/01/angular/ui-router/guide/neste

angular中要注意的指令

1.ng-repeat 遍历集合,给每个元素生成模板实例,每个实例的作用域中可以用一些特殊属性,如下: 1 $index //遍历集合的下标 2 $first //遍历集合中的第一个对象 3 $last //遍历集合中的最后一个对象 4 $middle //遍历集合第一个和最后一个之间的对象 5 $even //遍历集合的偶数对象 6 $odd //遍历集合的奇数对象 实例: 1 <ul> 2 <li ng-repeat="char in 3 [{'alphabet': 'K'

angular中模板

<!DOCTYPE html><!--调用模块--><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <script src="js/angular.js"></script> <title>Title</title></head><

AngularJs中的directives(指令)

一.指令的职责   指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法. 二.创建自定义指令 调用自定义指令的4种方式:元素.属性.样式类.注释. 常用的是前两种,实例如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

(七)理解angular中的module和injector,即依赖注入

依赖注入(DI)的好处不再赘言,使用过spring框架的都知道.angularjs作为前台js框架,也提供了对DI的支持,这是javascript/jquery不具备的特性.angularjs中与DI相关有angular.module().angular.injector(). $injector.$provide.对于一个DI容器来说,必须具备3个要素:服务的注册.依赖关系的声明.对象的获取.比如spring中,服务的注册是通过xml配置文件的<bean>标签或是注解@Repository.

angular中的动画效果

用angular来形成动画效果的代码如下 <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <title></title> <style> .box { width: 100px; height: 100px; background: red; } </st

Angular 中得 scope 作用域梳理

$scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了 $scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的 $scope 发生改变时也会立刻重新渲染视图. 有了 $scope 这样一个桥梁,应用的业务代码可以都在 controller 中,而数据都存放在controller 的 $scope 中. $rootScope Angular 应用启动并生成视图时,会将根 ng-app 元

angular中的通信方式

在项目中,我们可能会很经常性的利用到控制器之间的相互通信,在angular中的控制器之间的相互通信有以下几种方式: 1)通过本地数据的存储localstorage,sessionstorage, 2)通过rootScope,顶级作用域 3)通过$broadcast,$on,$emit的方式进行通信 在此就讲解下如何通过第三种方式进行通信的问题: $broadcast:顾名思义是广播的意思,一般用于父级控制器向子控制器传递信息的方法. $emit:主要是用于子控制器向父控制器传递信息的方法. $o

angular中的路径问题

我们在写项目时会遇到启动页调到引导页,引导页再调到首页, 那我们在用angular框架写这种东西的时候如果我们不细心的话就会遇到问题, 比如说找不到引导页的图片等等. 那我们怎么解决这个问题呢? 首先我们要明确,我们使用的angular框架所以我们应该使用angular中的框架来解决这个问题, 而不是还是按照原来的思想按部就班的使用路径跳转. 下面我们就来看一下, 1.启动页跳到引导页 app.controller("zeroController",function ($timeout