Question

我正在对AngularJS进行练习，我创建了一个将从数据库加载数据的表，我有一个＆＃34;详细信息＆＃34;按钮，当我点击该按钮时，它将在行下方分配一个新行，其中包含我单击的按钮。它的工作正常，但问题是当我点击＆＃34;详细信息＆＃34;按钮，它的详细信息，我只是希望它显示我点击的产品的详细信息。

这是我的HTML代码：

＆＃13;

var app = angular.module("dataApp", []);
app.controller("dataExcuteController", function ($scope, $window,$http) {
    $http.get('http://localhost:8080/sachonline/public/administrator/theloai/dstheloai').then(function (response) {
        $scope.theloai = response.data.message.ds_theloai;
        $scope.isLoading = false;
    });
    
    $scope.detailtheloai = function (item) {
        $scope.showdetail = true;
    };

});

＆＃13;

<body ng-app="dataApp" ng-controller="dataExcuteController">
<div class="container">
    <table class="table table-bordered">
        <thead class="text-center">
        <th>STT</th>
        <th>Tên thể loại</th>
        <th>Trạng thái</th>
        <th>
            <span><i class="fa fa-cog text-muted"></i></span>
        </th>
        </thead>
        <tbody ng-repeat="item in theloai">
        <tr>
            <td class="text-center">@{{ item.tl_ma }}</td>
            <td>@{{ item.tl_ten }}</td>
            <td class="text-center" ng-if="item.tl_trangThai==1">
                <span><i class="fa fa-check-circle text-success"></i></span>
            </td>

            <td class="text-center" ng-if="item.tl_trangThai==0">
                <span><i class="fa fa-times-circle text-danger"></i></span>
            </td>
            <td class="text-center">
                <button type="button" class="btn btn-sm btn-warning text-white mr-3 pt-0 pl-2 pr-2" ng-click="detailtheloai(item)"><i class="fa fa-info-circle"></i></button>
                <button type="button" class="btn btn-sm btn-success text-white mr-3 pt-0 pl-2 pr-2" data-toggle="modal" data-target="#editForm" ng-click="edittheloai($index)"><i class="fa fa-edit"></i></button>
                <button type="button" class="btn btn-sm btn-danger text-white pt-0 pl-2 pr-2" ng-click="removetheloai($index)"><i class="fa fa-trash"></i></button>
            </td>
        </tr>
        <tr ng-show="showdetail">
            <td colspan="4">
                <table class="table table-info table-bordered">
                    <tbody>
                        <tr>
                            <th class="text-right">Mã thể loại:</th>
                            <td>@{{ item.tl_ma }}</td>
                        </tr>
                        <tr>
                            <th class="text-right">Tên thể loại:</th>
                            <td>@{{ item.tl_ten }}</td>
                        </tr>
                        <tr>
                            <th class="text-right">Trạng thái:</th>
                            <td class="text-center" ng-if="item.tl_trangThai==1">
                                <span><i class="fa fa-check-circle text-success"></i></span>
                            </td>

                            <td class="text-center" ng-if="item.tl_trangThai==0">
                                <span><i class="fa fa-times-circle text-danger"></i></span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script src="{!!asset('js/showlist.js')!!}"></script>
</body>

＆＃13;

Answer 1

您需要存储每个项目的show值，因此我建议您进行此更改：

JS：

 $scope.detailtheloai = function (item) {
    item.showdetail = true;
};

HTML：

<tr ng-show="item.showdetail">

Ng-show没有显示产品的细节

1 个答案: