您的位置：首页 > Web前端 > AngularJS

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

2016-03-28 23:32 686 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航