CODEWITHSUNDEEP
angularjsdatatables
Pooja Bajaj Dhoot
Pooja Bajaj Dhoot

Reputation: 71

Ng-if to show and hide td data

Attached is my code, tried showing td data when the condtion of ng-if is true

 <tbody>
 <tr ng-repeat="fellow in fellowships">
   <td>{{$index}}</td>
   <td>{{fellow.Fellowship_Name}}</td>
   <div ng-repeat="value in data_report"
        ng-if="(fellow.F_Id==value.fellowship_id)? (show_row = true) : (show_row=false)">

     <td ng-show="show_row">{{value.Completed}}</td>
     <td ng-hide="show_row">0</td>

     <td ng-show="show_row">{{value.Not_Updated}}</td>
     <td ng-hide="show_row">0</td>

     <td ng-show="show_row">{{value.Total_schedule}}</td>
     <td ng-hide="show_row">0</td>
   </div>
 </tr>
 </tbody>

Its just giving 0 as result. Though data_report is having values Tried adding span in td with conditions in td and result in span. still the result is zero

May I know where the logic is going wrong and how it can be achieved?

Changed the code to

   <tbody>
    <tr ng-repeat="fellow in fellowships">
    <td>{{$index}}</td>
    <td>{{fellow.Fellowship_Name}}</td>

    <td>
    <span ng-repeat="value in data_report" ng-show ="fellow.F_Id==value.fellowship_id">{{value.Completed}}</span>
    </td>

    <td>
    <span ng-repeat="value in data_report" ng-show="fellow.F_Id==value.fellowship_id">{{value.Not_Updated}}</span>
    </td>

    <td>
   <span ng-repeat="value in data_report" ng-show="fellow.F_Id==value.fellowship_id">{{value.Total_schedule}}</span>
    </td>
</tr>
</tbody>

Here i am getting values but how can i set default value to zero if there are no values present?

Upvotes: 1

Views: 1642

Answers (1)

Maxim Shoustin
Maxim Shoustin

Reputation: 77904

In your case ng-if returns no boolean

The usage is (DOCs):

<ANY
  ng-if="expression">
...
</ANY>

I think you dont need ng-if at all. You can write something like:

 <tbody>
 <tr ng-repeat="fellow in fellowships">
   <td>{{$index}}</td>
   <td>{{fellow.Fellowship_Name}}</td>
   <div ng-repeat="value in data_report">
     <td>{{(fellow.F_Id==value.fellowship_id) ? value.Completed: 0}}</td>
     <td>{{(fellow.F_Id==value.fellowship_id) ? value.Not_Updated: 0}}</td>
     <td>{{(fellow.F_Id==value.fellowship_id) ? value.Total_schedule: 0}}</td>

   </div>
 </tr>
 </tbody>

Its not best solution, in Javascript you can set for example value.Completed to be by default 0. It will help you to simplify your HTML

Upvotes: 2

Related Questions