angular写的导航。自学angular已有一段时间。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src='../angular-1.3.9/angular.js'></script>
<style>
*{
list-style: none;
margin: 0;
padding: 0;
}
.listbox{
width:600px;
height: 30px;
margin: 0 auto;
border: 1px solid #ccc;
box-shadow: 2px 2px 3px #333;
}
.listbox li{
width: 100px;
float: left;
height: 30px;
line-height: 32px;
text-align: center;
cursor: pointer;
font-weight: bold;
color: #333;
font-family: '微软雅黑';
border-radius:15px;
}
.listbox li.cour{
background: skyblue;
color:#fff;
text-shadow:1px 1px 1px #333;
}
</style>
</head>
<body ng-app='App'>
<ul ng-controller='cont' class='listbox'>
<li ng-repeat=' i in list' ng-click='cour($index)' ng-class="{ true :'cour',false:''} [i.isclick]">{{i.text}}</li>
</ul>
<script>
var data=[{text:'Home',isclick:false},{text:'News'},{text:'Project',isclick:false},{text:'Cooperate',isclick:false},{text:'About Us',isclick:false},{text:'More',isclick:false}];
var APP=angular.module('App',[]);//定义angular模块
APP.controller('cont',function($scope){//angular控制器
$scope.list=data;//注入数据
$scope.list[0].isclick=true;//首个加样式
$scope.cour=function(index){
//这里用了js实现的,不用js用angular要怎么实现
for(var i=0;i<$scope.list.length;i++){
$scope.list[i].isclick=false;//点击的时候其他的都不加样式
}

$scope.list[index].isclick=true;//ng-click时当前的添加样式
}

})
</script>
</body>
</html>

ng-click的时候让没选中的都不加样式，用angular需要用到什么呢？

我这里直接用js实现了，而且我感觉数据里的isclick:false不加，用变量也应该可以实现的！

angular 实现导航ng-click切换的更多相关文章

  1. 导航栏图标切换：click事件，hover事件

    最近再做一个基于angular6的项目,导航栏需求:1.hover切换图标 2.click切换图标 先用jquery实现功能,在在angular组件里面实现. demo如下: <!DOCTYPE ...

  2. 使用Angular Router导航基础

    名称 简介 Routes 路由配置,保存着那个URL对应着哪个组件,以及在哪个RouterOulet中展示组件. RouterOutlet 在HTML中标记路由内容呈现位置的占位符指令. Router ...

  3. jQuery----左侧导航栏面板切换实现

    页面运行结果:                                                      点击曹操 点击刘备 点击孙权 原图 需求说明:原图如上所示,点击一方诸侯的时候 ...

  4. Vue如何实现swiper左右滑动内容区控制导航tab同时切换高亮

    Vue如何实现左右滑动内容区控制导航tab同时切换高亮,实现的效果是:点击导航按钮时内容区发生改变,左右滑动内容区时导航按钮跟随切换高亮,停留在某个内容区时刷新页面后仍然停留在当前内容区.       ...

  5. Angular+Bootstrap3导航菜单

    Angular+Bootstrap3导航菜单 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀 ...

  6. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  7. Angular Route导航

    我们用Angular cli创建带有路由的新项目 ng new router --routing Angular Routes API文档 Angular的文档中有详细的解释: 1)https://a ...

  8. CSS实现导航条Tab切换的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  9. angular 2 - 001 ng cli的安装和使用

    angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...

随机推荐

  1. wemall app商城源码Android之支付宝通知处理类

    wemall-mobile是基于WeMall的Android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改.本文分享wemall app商城源码Android之处 ...

  2. 长连接 Socket.IO

    概念 说到长连接,对应的就是短连接了.下面先说明一下长连接和短连接的区别: 短连接与长连接 通俗来讲,浏览器和服务器每进行一次通信,就建立一次连接,任务结束就中断连接,即短连接.相反地,假如通信结束( ...

  3. 一个想法照进现实-《IT连》创业项目：三天的风投对接活动内幕分享

    前言: 话说出来创业的,都有一颗寻找风投的心,只因都有一个共同的特征:缺钱. 有的只是缺几十万,有的缺几百万,有的缺几千万,有的缺几个亿. 中国的市场,只要有需求,就有服务,只要有服务,就多了套路. ...

  4. effective C++ Item 33 避免隐藏继承而来的名字

    1. 普通作用域中的隐藏 名字实际上和继承没有关系.有关系的是作用域.我们都知道像下面的代码: int x; // global variable void someFunc() { double x ...

  5. Jmeter正则提取list中相同key的value和出现的次数

    list中如何计算某个key出现的次数以及通过正则关联参数化呢? 首先要通过正则提取出现key的value 举例:

  6. Mutillidae在kali linux上的安装

    XAMPP:下载地址(https://www.apachefriends.org/download.html) Mutillidae:下载地址(http://sourceforge.net/proje ...

  7. 用Angular2+Express快速搭建博客

    1. 写在前面 昨天花了1天的时间把自己的博客从以前的Express换成了Angular2+Express,遂记录于此.博客Demo在这里,你也可以点击这里查看完整代码. 第一次使用Angular2, ...

  8. JAVA基础知识（2）--关键字final的使用

    /***Final关键字的使用*@author lihaiming*Email:912547587@qq.com*关键字Final可以修饰属性,方法,类*修饰属性的时候,final修饰的变量是一个常量 ...

  9. dellR720重启找不到启动引导项，手动选择也无用。

    机器重启后显示 no boot device available.(如下图)检查bios中设置也是没问题的,因为装完系统后根本没动过什么.F11手动选择启动项也还是会跳到这里来. 这台机子做的Raid ...

  10. 【C++】模拟实现auto_ptr

    看了<Effctive C++>,里面提到用对象去管理资源,可以有效防止内存泄漏. 结合auto_ptr特性,稍微思考了一下,实现了一个简单的auto_ptr (因为代码量小,就不分文件了 ...