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. ASP提取字段中的图片地址

     Function RegImg(TheStr)     Dim RegEx     Set RegEx = New RegExp '建立正则表达对象.     RegEx.IgnoreCase =T ...

  2. MellPlayer, 基于网易云歌单的命令行播放器

    MellPlayer 前言 我写代码时非常喜欢听音乐,最近在网易云歌单中听到了许多入耳惊艳的歌,觉得非常不错.但是歌单的随机播放以及快速切换是个软肋,于是开发了MellPlayer,可以按照分类随机听 ...

  3. Android实现录屏直播（三）MediaProjection + VirtualDisplay + librtmp + MediaCodec实现视频编码并推流到rtmp服务器

    请尊重分享成果,转载请注明出处,本文来自Coder包子哥,原文链接:http://blog.csdn.net/zxccxzzxz/article/details/55230272 Android实现录 ...

  4. Visual Studio 2017 通过SSH 调试Linux 上.NET Core

    Visual Studio 2017 通过SSH 调试Linux 上.NET Core 应用程序. 本文环境 开发环境:Win10 x64 Visual Studio 2017 部署环境:Ubuntu ...

  5. python中try except处理程序异常的三种常用方法

    如果你在写python程序时遇到异常后想进行如下处理的话,一般用try来处理异常,假设有下面的一段程序: try: 语句1 语句2 . . 语句N except .........: do somet ...

  6. 浅谈并发和tomcat线程数

    假设Tomcat每到固定一个时间会有一个高峰,峰值的并发达到了3000以上,最后的结果是Tomcat线程池满了,日志看很多请求超过了1s. 服务器性能很好,Tomcat版本是7.0.54,配置如下 & ...

  7. 使用slice和concat对数组的深拷贝和浅拷贝

    一.数组浅拷贝 在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份. 如下代码,如果只是简单才用赋值的方法,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致了问 ...

  8. 基于ELK的数据分析实践——满满的干货送给你

    很多人刚刚接触ELK都不知道如何使用它们来做分析,经常会碰到下面的问题: 安装完ELK不知从哪下手 拿到数据样本不知道怎么分解数据 导入到elasticsearch中奇怪为什么搜不出来 搜到结果后,不 ...

  9. IPhone 、Webkit手机浏览器Div滚动、滑动卡，遮罩层被穿透的解决办法

    在滚动条的层上面加上-webkit-overflow-scrolling:touch;样式即可解决!

  10. iwebshop里面传数组且输出

    //php后台 $starttimestr = $arr[0]['forea_time']; $endtimestr = $arr[0]['end_time']; $data['starttime'] ...