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

最新推荐文章于 2021-06-02 10:58:00 发布

FreeMing-imduingui0

最新推荐文章于 2021-06-02 10:58:00 发布

阅读量5.2k

点赞数 2

分类专栏：随笔我的大学 angularjs 前端那些事文章标签： angularjs ng-click ng-repeat ng-hide

本文链接：https://blog.csdn.net/qq_20881087/article/details/51002287

版权

随笔同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

我的大学

28 篇文章 0 订阅

订阅专栏

前端那些事

25 篇文章 0 订阅

订阅专栏

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>