I have an ng-repeat
that looks like this:
<div ng-repeat = "Header in Headers" ng-show = "Headers.length > 0">
<div class = "promoHeader">
{{Header.Descript1}}
</div>
<div class="touchcarousel minimal-light promosCarousel">
<ul class="touchcarousel-container">
<li ng-repeat = "Promo in Header.Promos" class="touchcarousel-item" ng-class = "{'disabledPromo' : invalidPromo(Promo)}">
<a id = "{{Promo.PromoID}}" ng-click = "viewPromo(Promo)">
<img class = "tcimage" ng-src = "{{Promo.PhotoURL}}"/>
<div class = "tctext"><span class = "tctext-inner">{{Promo.Descript1}}</span></div>
</a>
</li>
</ul>
</div>
</div>
For some reason Header.Descript1
is taking the value of Promo.Descript1
. What makes no sense is that it works fine in Android
but breaks in iOS
. This is a cordova 3.3.0
application with jQuery Mobile
and angularjs
. I took a look at the DOM
in weinre
but that hasn't helped. Perhaps there is a compatibility issue between iOS
and angularjs
?
Edit
It appears the issue is caused in WebSQL
not angular
:
db.transaction(function(tx){
tx.executeSql('SELECT * FROM PromoHead INNER JOIN Promo ON PromoHead.HeadID = Promo.HeadID ORDER BY PromoHead.SortOrder', [], function (tx, results){
for (var i = 0; i<results.rows.length; i++)
{
headers.push({
HeadID : results.rows.item(i).HeadID,
Descript1 : results.rows.item(i).Descript1,
Promos : []
});
}
}, errorCB);
}, errorCB);
I checked PromoHead
and it has the correct values. When I perform this inner join
, however, PromoHead
takes the value of the first Promo
row in the results. This error only occurs on iOS
, android
works as expected.