Ng-show没有显示产品的详细信息
[英]Ng-show not showing product's detail
问题描述
I'm making an exercise about the AngularJS, and i created a table that will load the data from database, i have a "Detail" button, when i click on that button, it will assign a new row below the row which contain a button i clicked. 
我正在进行有关AngularJS的练习，我创建了一个表，该表将从数据库中加载数据，我有一个“详细信息”按钮，当我单击该按钮时，它将在该行下方分配一个新行，其中包含一个我点击的按钮。 It's work fine but the problem is when i click the "Detail" button, it the detail of all, i just want it to show the detail of which product i clicked. 它工作正常，但问题是当我单击“详细信息”按钮时，它是所有详细信息，我只希望它显示我单击的产品的详细信息。
Here is my HTML code: 这是我的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>
1 个解决方案
解决方案1
0 2018-04-03 18:24:51
You need to store the show value for every item, therefore I propose you this changes: 您需要存储每个项目的显示值，因此我建议您进行以下更改：
js: js：
$scope.detailtheloai = function (item) {
item.showdetail = true;
};
html: 的HTML：
<tr ng-show="item.showdetail">
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.