Question

我只是从后端获取表数据。在我的表中有两个字段Approvedon和Approvedby，当这两个字段为null时，我需要将它们的值显示为{{1}在table.For我已经使用了If-else但是我无法打印它。出了什么问题？

pending

当响应的长度是<body ng-app="App" ng-controller="myCtrl" ng-init="loadLeaves()"> <div class="col-lg-12 col-md-12 col-xs-12 padding table-responsive"> <table class="table table-hover table-bordered"> <tbody> <tr ng-repeat="data in leaveList"> <td>{{$index+1}}</td> <td>{{data.AppliedOn | date : 'dd/MM/yyyy'}}</td> <td>{{data.LeaveType}}</td> <td>{{data.LeaveFrom | date : 'dd/MM/yyyy'}}</td> <td>{{data.LeaveTo | date : 'dd/MM/yyyy'}}</td> <td>{{data.Duration}}</td> <td>{{data.Status}}</td> <td>{{data.Approvedon | date : 'dd/MM/yyyy'}}</td> <td>{{data.Approvedby}}</td> </tr> </tbody> </table> </div> <div class="col-lg-12 col-md-12 col-xs-12 alert alert-warning noData"> <strong>No Data Found!!</strong> </div> </body> <script> var app=angular .module('App', []) .controller('myCtrl', function ($scope, $http) { $http.post('/leave/EmployeeLeaveList').then(function (response) { $scope.leaveList = response.data; if ($scope.leaveList.Approvedon == "" || $scope.leaveList.Approvedon == null) { $scope.leaveList.Approvedon = "pending"; } }) } }) </script>时，它应该显示0，否则它应该被隐藏。默认情况下在css中隐藏它。
我在jquery中做了所有这些很容易，但现在只是学习角度，这就是为什么很多疑惑。
请给任何人建议。

Answer 1

使用ng-if,如下所示：

<body ng-app="App" ng-controller="myCtrl" ng-init="loadLeaves()">
    <div class="col-lg-12 col-md-12 col-xs-12 padding table-responsive" ng-if="leaveList.length">
        <table class="table table-hover table-bordered">
            <tbody>
                <tr ng-repeat="data in leaveList">
                    <td>{{$index+1}}</td>
                    <td>{{data.AppliedOn | date : 'dd/MM/yyyy'}}</td>
                    <td>{{data.LeaveType}}</td>
                    <td>{{data.LeaveFrom | date : 'dd/MM/yyyy'}}</td>
                    <td>{{data.LeaveTo | date : 'dd/MM/yyyy'}}</td>
                    <td>{{data.Duration}}</td>
                    <td>{{data.Status}}</td>
                    <td>{{data.Approvedon | date : 'dd/MM/yyyy'}}</td>
                    <td>{{data.Approvedby}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div ng-if="!leaveList.length" class="col-lg-12 col-md-12 col-xs-12 alert alert-warning noData">
        <strong>No Data Found!!</strong>
    </div>
</body>

并删除css以隐藏\显示（如果有）。

<强>更新

根据您的评论 ..离开列表是一个对象，我得到Approvedon = null和Approvedby =“”..`

由于leaveList是一个对象，因此请将ng-repeat更改为：ng-repeat="(key,value) in leaveList"

，对于绑定，请执行以下操作：{{leaveList[key]}}或{{value}}

Answer 2

正如@anoop指出的那样，你只需要使用ng-if来实现你想要实现的目标。

<body ng-app="App" ng-controller="myCtrl" ng-init="loadLeaves()">
    <div class="col-lg-12 col-md-12 col-xs-12 padding table-responsive">
        <table class="table table-hover table-bordered">
            <tbody>
                <tr ng-repeat="data in leaveList">
                    <td>{{$index+1}}</td>
                    <td>{{data.AppliedOn | date : 'dd/MM/yyyy'}}</td>
                    <td>{{data.LeaveType}}</td>
                    <td>{{data.LeaveFrom | date : 'dd/MM/yyyy'}}</td>
                    <td>{{data.LeaveTo | date : 'dd/MM/yyyy'}}</td>
                    <td>{{data.Duration}}</td>
                    <td>{{data.Status}}</td>
                    <td ng-if="data.Approvedon!==null&&data.Approvedon!==''">{{data.Approvedon | date : 'dd/MM/yyyy'}}</td>
                    <td ng-if="data.Approvedon===null||data.Approvedon===''">Pending</td>

                    <td>{{data.Approvedby}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div ng-if="!leaveList.length" class="col-lg-12 col-md-12 col-xs-12 alert alert-warning noData">
        <strong>No Data Found!!</strong>
    </div>
</body>

如何在http响应中使用if-else？

2 个答案: