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

来源：互联网发布：中央司法警官学院知乎编辑：程序博客网时间：2024/04/29 14:00

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>

0 0