ng-click传参控制ng-repeat元素显示与隐藏

说明：

1、使用ng-repeat显示参数

2、通过ng-click按钮显示或隐藏内容。通过添加shows和id两个参数控制显示。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body><div ng-app="myApp" ng-controller="personCtrl" ng-init="names=[
{name:'Jani',country:'Norway',shows:'true',id:0},
{name:'Hege',country:'Sweden',shows:'true',id:1},
{name:'Kai',country:'Denmark',shows:'true',id:2}]"><button ng-click="toggle()">隐藏/显示</button><div ng-repeat='item in names'><div ng-hide="item.shows">OKOK</div><button ng-click="showItemId(item.id)">{{item.name}}</button></div>Javascript:<p ng-hide="myVar">名:<input type=text ng-model="firstName"><br> 姓:<input type=text ng-model="lastName"><br><br> 姓名: {{firstName + " " + lastName}}</p></div><script>var app = angular.module('myApp', []);app.controller('personCtrl', function($scope) {$scope.firstName = "John",$scope.lastName = "Doe"$scope.myVar = false;$scope.showItemId = function(itemId) {$scope.names[itemId].shows = false;alert("Item Id 是 " + itemId);};$scope.toggle = function() {$scope.myVar = !$scope.myVar;}});</script></body></html>

angularjs ng-click传参控制ng-repeat元素显示与隐藏相关推荐

[Python] scrapy + selenium 抓取51job 职位信息（实现传参控制抓取页数+职位名称+城市）
目录一.目标二.51job网页分析: 1.网页构成观察 2.网页分析三.代码实现 1. 踩过的坑-----实现城市选择 2.代码实现 3.代码优化 1)存放格式优化 2)在爬虫中去掉\xa0\x ...
vue 电梯导航制作（鼠标滚动控制导航栏的显示与隐藏）
鼠标滚动控制导航栏的显示与隐藏上图先看效果: 下面为2张图,默认为导航栏,当鼠标向下滚动一定距离时,变为箭头, 并且点击黄色的返回图标,也变为下方箭头,此时再滚动窗口,不会变为导航栏. 点击下方箭头 ...
隐藏a标签html,a标签显示隐藏 js怎么控制a标签的显示和隐藏
js怎么控制a标签的显示和隐藏将标签放在层里面,控制层的显示和隐藏就可以: show是层的ID名, 隐藏层:document.getElementById("show").sty ...
jquery控制table的行显示和隐藏
jquery控制table的行显示和隐藏一.开发记录我们经常会遇到需要在html中控制元素进行隐藏或显示的场景: 隐藏: $('#id').css('display','none'); 显示: $ ...
AngularJs通过路由传参解决多个页面资源浪费问题
在实际开发中会遇到很多类似模块界面大体都一致只是极少的细节部分不一样,这时不管是在html页面还有js及数据交互的时候我们就没必要因为这些不同的页面分出不同的文件,这样很浪费内存及效率,于是我在开发中 ...
AngularJS中页面传参方法
1.基于ui-router的页面跳转传参 (1) 用ui-router定义路由,比如有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的 ...
angularjs跨页面传参遇到的一些问题
上周写课程选择时间功能时需要将课程ID,星期,节次等参数传递给下一个页面,就查了查angularjs的ui-router跨页面传参,一开始是这样写的: 在app.js下添加 params:{'args ...
java导出Excel(POI模式 Ajax下载 Post传参) bootstrap table getVisibleColumns获取显示的列
工具类 (正式使用) package com.qyj.utils;import com.alibaba.fastjson.JSONArray; import com.alibaba.fastjson. ...
控制元素显示和隐藏的方式及区别、内容溢出处理(区域滚动)、透明性、字体图标、常见字体、自定义字体设计、网站图标、CSS代码分析
元素的显示与隐藏: 常见控制元素的显示和隐藏的属性有display.visibility.overflow,需要清楚的理解三者之间的区别. display显示: 当值为none时为销毁对象,不保留原位 ...

angularjs ng-click传参控制ng-repeat元素显示与隐藏

ng-click传参控制ng-repeat元素显示与隐藏

说明：

1、使用ng-repeat显示参数

2、通过ng-click按钮显示或隐藏内容。通过添加shows和id两个参数控制显示。

angularjs ng-click传参控制ng-repeat元素显示与隐藏相关推荐

最新文章

热门文章