AngularJS displaying different number of td elems in each tr using ng-repeat and ng-if -


I am trying to create a table in angles where the number of TD elements in the table per line varies. Sometimes there will be a TD element in two columns and sometimes two TD elements.

The example code given below is giving me the following table:

ID Item 1 This item is 2! ID ID 2 This item is 2! This item is 2!
id item 4 this item is 2!

However, I want to see the table like this:

id item 1
this item is 2!
id items 3
id items 4

Angelor Code:

  & lt ;! DOCTYPE html & gt; & Lt; Html ng-app = "myApp" & gt; & Lt; Top & gt; & Lt; link href = "bootstrap.css" rel = "stylesheet" /> & Lt; Script src = "angular.js" & gt; & Lt; / Script & gt; & Lt; Script & gt; Var myApp = angular.module ('myApp', []); MyApp.controller ("TabCtrl", function ($ scope) {$ scope.items = ["item 1", "item 2", "item 3", "item 4"]}); & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div ng-controller = "TabCtrl" & gt; & Lt; Table class = "table" & gt; & Lt; Tr ng-repeat = "item in item" & gt; & Lt; div ng-if = "item! = 'item 2'" & gt; & Lt; TD & gt; Id & lt; / TD & gt; & Lt; TD & gt; {{Items}} & lt; / TD & gt; & Lt; / Div & gt; & Lt; div ng- if = "item == 'item 2'" & gt; & Lt; td colspan = "2" & gt; This item 2! & Lt; / Td> & Lt; / Div & gt; & Lt; / TR & gt; & Lt; / Table & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;   

Why not selecting one of the divs for each line?

This is what I have seen when I pasted my html in one:

<Voodoo>

div inside the tag Tr tag, and the td tag is not allowed inside div tag, maybe div tag being omitted completely , And then ng-if s have lost with them

You do not need the div tag just ng-if S td tag:

  & lt; Table class = "table" & gt; & Lt; Tr ng-repeat = "item in item" & gt; & Lt; td ng-if = "item! = 'item 2'" & gt; Id & lt; / Td> & Lt; td ng-if = "item! = 'item 2'" & gt; {{Items}} & lt; / Td> & Lt; Td ng-if = "item == 'item 2'" colspan = "2" & gt; This item 2! & Lt; / Td> & Lt; / TR & gt; & Lt; / Table & gt;    

Comments

Popular posts from this blog

Verilog Error: output or inout port "Q" must be connected to a structural net expression -

jasper reports - How to center align barcode using jasperreports and barcode4j -

c# - ASP.NET MVC - Attaching an entity of type 'MODELNAME' failed because another entity of the same type already has the same primary key value -