search

opitzconsulting / jquery-mobile-angular-adapter

jquery mobile angular adapter
MIT License
517 stars 114 forks source link

toggle table: problems with the header #148

Closed tbosch closed 11 years ago

tbosch commented 11 years ago

Hello. I was hoping someone in this group can help me or point me to where can I place this kind of questions.

I have just started with Angularjs and wanted to use it with jquery Mobile using https://github.com/tigbro/jquery-mobile-angular-adapter. I did a very fast test, trying to use colum toggle table which content is populated through Angular's data binding.

Everything seems to work fine, but when I try to swithch on and off some of the table columns, just the heading (wich are static) are modified.

My HTML code is the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html ng-app>

<head>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />

    <!--  <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>  -->

    <script src="js/lib/jquery-angular-adapter-standalone.js"></script>
    <script src="js/controler.js"></script>

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body ng-controller="PhoneListCtrl">

<div data-role="page">

<input style="width:100%" ng-model="query"></input>    

<table style="width:100%" data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke ui-body-d">
     <thead>
       <tr>
           <th>#</th>
         <th data-priority="1">Phone name</th>
         <th data-priority="3">Snippet</th>
         <th data-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
         <th data-priority="5">Reviews</th>
       </tr>
     </thead>
     <tbody>
       <tr ng-repeat="phone in phones | filter:query">
         <th style="width:1%">1</th>
         <td style="width:20%">{{phone.name}}</td>
         <td style="width:20%">{{phone.snippet}}</td>
         <td style="width:1%">100%</td>
         <td style="width:1%">74</td>
       </tr>
      </tbody>
</table>

</div>

</body>
</html>

And the PhoneListControler contains just the same information as present in the angularjs tutorial initial example.

Any suggestions on what might be happening?

Best regards Oriol

orioldelos commented 11 years ago

thannk you Tigbro for moving this issue here ... I see that most of the code is lost and has been interpreted as HTML code to be rendered by the browser when reviewing this issue description. Therefore I am trying to post it again but it keeps showing the rendered table instead of the html code... How should I do it to have it show the HTML code instead ot rendering it?

tbosch commented 11 years ago

Hi, the trick in Markdown is to indent every line with at least 4 blanks. Updated the initial comment.

Tobias

tbosch commented 11 years ago

Hi, the problem is that jquery mobile 1.3.0 does not yet support adding dynamic content to tables / refreshing tables after adding dynamic content, see here: https://github.com/jquery/jquery-mobile/issues/5570.

When jqm 1.3.1 is released, this should work. See #142.

Closing this, as it's a duplicate...

Tobias