Ng-show沒有顯示產品的詳細信息

Question

我正在進行有關AngularJS的練習，我創建了一個表，該表將從數據庫中加載數據，我有一個“詳細信息”按鈕，當我單擊該按鈕時，它將在該行下方分配一個新行，其中包含一個我點擊的按鈕。 它工作正常，但問題是當我單擊“詳細信息”按鈕時，它是所有詳細信息，我只希望它顯示我單擊的產品的詳細信息。

這是我的HTML代碼：

 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; }; });

 <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>

Answer 1

您需要存儲每個項目的顯示值，因此我建議您進行以下更改：

js：

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

的HTML：

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

Ng-show沒有顯示產品的詳細信息

問題描述

1 個解決方案

解決方案1
0 2018-04-03 18:24:51

Ng-show沒有顯示產品的詳細信息

問題描述

1 個解決方案

解決方案1 0 2018-04-03 18:24:51

解決方案1
0 2018-04-03 18:24:51