2017-06-16 7 views
0

テーブルのデータをバックエンドから取得しています。ApprovedonApprovedbyの2つのフィールドがあります。これらの2つのフィールドがnullになると、テーブルにpendingという値を表示する必要があります。If-else But印刷できません。何が問題になりましたか?http応答でif-elseを使用するには?

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

Similary応答の長さは、それはNo Data Foundが表示されるはずです0あり、それ以外の場合は、CSSでhided.Byデフォルトはそれを隠していなければなりません。
私はこれらすべてをjqueryで簡単に実行しましたが、今は驚くほど多くの疑問を抱いています。
誰にでも提案してください。

+0

出力はどのようになっていますか?あなたは "保留中"を表示できますか? – Manas

+0

リーヴェリストはアレイではありませんか?あなたは、弁護士に "approvedOn"というプロパティの値をチェックしています。 – Manas

+0

いいえ '保留中'を表示できません – user7397787

答えて

1

@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> 
+0

あなたはちょうど私の答えをコピーし、受け入れて得た...うわー:)、OPは週末急いでいるようです。 :) – anoop

+1

私はあなたの答えをコピーしていません。私は私の答えでもあなたに言及しました。しかし、あなたは質問の中の「保留中」の部分を世話しませんでした。私は、飛行士がオブジェクトではあるが配列ではないことを知った後、私の答えを更新していない。 :) – Vivz

2

使用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を削除します。

更新:

..leaveリストがオブジェクトであるあなたのコメントどおり

となっていますApprovedon = NULLとApprovedby = "" .. `

leaveList以来、オブジェクト、変更ので、ごngのリピート:ng-repeat="(key,value) in leaveList"

、および結合のためにはそれが好きですか:{{leaveList[key]}}または{{value}}

+0

私はあなたの答えをupvotedしています。 – Vivz

+0

ありがとう、気持ちはあまりにも意図されていません... :) – anoop

関連する問題