记录angular遍历的元素隐藏显示修改_angular 隐藏遍历的值-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38395165/article/details/78425498

本文详细探讨了在Angular应用中如何通过指令控制元素的隐藏与显示，包括使用*ngIf和ngSwitch进行条件渲染，以及结合变量动态控制元素状态的方法。通过实例解析，深入理解Angular模板语法在实际开发中的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angular/angular.min.js" type="text/javascript"></script>
    <style>
        .table tr{margin-bottom:15px; float: left; width:100%;}
        .table tr td{margin-right:100px;float: left;}
        .table tr td a{cursor:pointer;}

    </style>
</head>
<body ng-app="myApp" ng-controller="personCtrl">
<table class="table">
    <tr ng-repeat="xxx in companyListInfo">
        <td>
            <span>{{xxx.companyName}}</span>
        </td>
        <td>
            <span>企业邮箱:{{xxx.nameD}}</span>
            <a ng-click="actions.add(xxx.id+'1')">+</a>
            <input type="text" ng-if="data.dropdownMenu == xxx.id+'1'"/>
        </td>
        <td>
            <span>企业类型:{{xxx.nameE}}</span>
            <a ng-click="actions.add(xxx.id+'2')">+</a>
            <input type="text" ng-if="data.dropdownMenu == xxx.id+'2'"/>
        </td>
        <td>
            <span>企业官网:{{xxx.nameW}}</span>
            <a ng-click="actions.add(xxx.id+'3')">+</a>
            <input type="text" ng-if="data.dropdownMenu == xxx.id+'3'"/>
        </td>
        <td>
            <span>企业官网:{{xxx.nameW}}</span>
            <a ng-click="actions.add(xxx.id+'4')">+</a>
            <input type="text" ng-if="data.dropdownMenu == xxx.id+'4'"/>
        </td>
    </tr>
</table>

<script>
    var app = angular.module('myApp', []);
    app.controller('personCtrl', function($scope,$interval) {
        $scope.showtext = false;
        $scope.companyListInfo = [
            {id:"1",companyName:"公司1",nameD:"成都市",nameE:"网络01",nameL:'私营',nameW:''},
            {id:"2",companyName:"公司2",nameD:"北京市",nameE:"网络02",nameL:'公立',nameW:'www1'},
            {id:"3",companyName:"公司3",nameD:"上海市",nameE:"网络03",nameL:'合资',nameW:'www2'},
            {id:"4",companyName:"公司4",nameD:"深圳市",nameE:"网络04",nameL:'外企',nameW:'www3'}
        ];
        $scope.data = {
            dropdownMenu: ""
        };
        $scope.num = 0;
        $scope.actions ={
            add : function(id){
                $scope.num++;
                $scope.data.dropdownMenu = id;
                alert($scope.data.dropdownMenu);
            }
        }
    });
</script>
</body>
</html>