Cách sử dụng ng-if với bảng để hiển thị td dựa trên điều kiện

Question

Với tham chiếu đến bài đăng trước đó trên ng-if trong DIV để tham khảo liên kết được cung cấp tại đây :: Ng-If within DIV, tuy nhiên khi tôi thử cùng với ng -if bên trong bảng với ng-lặp lại trên td nó dường như không hoạt động tốt. Sửa tôi nếu tôi sai Tôi đã thực hiện 2 lần cố gắng hiển thị cột dựa trên điều kiện nhưng không có gì hoạt động. Dưới đây tôi đã đưa ra mã để tham khảo. Ai đó có thể giúp tôi về điều này. Vui lòng cho biết nếu bạn cần làm rõ thêm.

HTML

Thử :: 1

<table> 
     <tr ng-repeat = "data in comments"> 
      <td ng-if="data.type == 'hootsslllll' "> 
      //differnt template with hoot data 
      </td> 
      <td ng-if="data.type == 'story' "> 
      //differnt template with story data 
      </td> 
      <td ng-if="data.type == 'article' "> 
      //differnt template with article data 
      </td> 
     </tr> 

    </table> 

Hãy thử :: 2

<table> 
    <tr ng-repeat = "data in comments"> 
     <div ng-if="data.type == 'hootsslllll' "> 
      <td> //differnt template with hoot data </td> 
     </div> 
     <div ng-if="data.type == 'story' "> 
      <td> //differnt template with story data </td> 
     </div> 
     <div ng-if="data.type == 'article' "> 
      <td> //differnt template with article data </td> 
     </div> 
    </tr> 
</table> 

Answer 1

ng-if nên làm việc cho bạn thử :: 1. Đây là fiddle làm việc ví dụ

http://jsfiddle.net/shivaraj/n3xWB/

Answer 2

Hầu hết các các trình duyệt sẽ bỏ qua bất kỳ phần tử DOM nào khác trong cấu trúc bảng nếu nó không được định dạng tốt. Điều này ngụ ý, trong mã trên, bạn không thể có thẻ div trong một số tr. Hãy thử điều này thay vì

<table> 
    <tr ng-repeat = "data in comments"> 
    <td ng-if="data.type == 'hootsslllll' "> //differnt template with hoot data </td> 
    <td ng-if="data.type == 'story' "> //differnt template with story data </td> 
    <td ng-if="data.type == 'article' "> //differnt template with article data </td> 
    </tr> 
</table> 

Answer 3

Tránh sử dụng bên trong phải tuân theo ngữ nghĩa trình duyệt tốt hơn. Hơn nữa, khi kiểm tra bình đẳng '===' có thể là một lựa chọn tốt hơn, nếu bạn muốn đảm bảo loại giá trị trên RHS của biểu thức bình đẳng.

này làm việc cho cả hai <table> và <div> riêng

<div ng-controller="tableCtrl"> 
     <div ng-repeat="data in comments"> 
      <div ng-if="data.type === 'hootsslllll' ">//differnt template with hoot data</div> 
      <div ng-if="data.type === 'story' ">//differnt template with story data</div> 
      <div ng-if="data.type === 'article' ">//differnt template with article data</div> 
     </div> 
</div> 

http://jsfiddle.net/Mu6T6/3/