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>
6603
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
