AngularJS：iOS不显示ng-repeat值
我在项目中使用AngularJS并结合Onsen UI框架。现在在Android和Chrome中一切正常。但是在iOS或Safari中我很难显示ng-repeat值。
AngularJS：
Onsen.controller("catFilter", ["$scope", "$http", "store", function($scope, $http, store){
$scope.order = [];
$scope.search = "";
$scope.products = [];
$scope.categories = [];
//GET PRODUCTS TO FILL MENU
store.getProducts().then(function(data){
$scope.products = data;
})
//GET TOTAL PRICE OF ORDER
$scope.getPrice = function(){
$scope.price = 0;
for(var b = 0; b<$scope.order.length;b++)
{
$scope.price += $scope.order[b].aantal * $scope.order[b].price;
}
$scope.price = $scope.price.toFixed(2);
return '€ ' + $scope.price;
}
//MODAL ORDER OVERVIEW CHECKOUT
$scope.modal = function(){
modal.show();
};
$scope.modalhide = function(){
modal.hide();
}
$scope.removeProduct = function(){
}
//GET AANTAL +
$scope.getaantal = function(pid){
}
// SEND ORDER
$scope.sendOrder = function(order){
$scope.placeorder = order;
$scope.custID = document.getElementById('uname').innerHTML;
$scope.price = 0;
for(var b = 0; b< order.length;b++)
{
$scope.price += order[b].aantal * order[b].price;
}
$scope.price = $scope.price.toFixed(2);
$http.get("../api/placeorder/"+$scope.custID+"/"+$scope.price).success(function (data) {
$scope.orderID = data;
for(var i = 0; i<$scope.order.length;i++){
$http.get("../api/placeorderdetails/"+$scope.orderID+"/"+order[i].prodid+"/"+order[i].aantal).success(function (data) {
window.location = "/mserved/index1.html?username="+$scope.custID;
//ADD EXTRAS
//REDIRECT + INFORM
});
}
});
}
//COMPOSE ORDER ADD/REMOVE/UPDATE
$scope.productRemove = function($event, pid){
$scope.productid = pid;
if($scope.order.length > 0)
{
for(var b = 0; b<$scope.order.length;b++){
if($scope.order[b].prodid == pid)
{
if($scope.order[b].aantal > 1)
{
$scope.order[b].aantal--;
document.getElementById('aantal').innerHTML = document.getElementById('aantal').innerHTML - 1;
}
else
{
$scope.order.splice(b,1);
document.getElementById('aantal').innerHTML = '+';
//update quantity in app UI!
}
}
}
}
}
$scope.productAdd = function($event,pname, pid, pprice) {
$scope.pzelfdeid = -1;
$scope.pzelfde = -1;
$scope.prodname = pname;
$scope.prodid = pid;
$scope.price = pprice;
if($scope.order.length == 0){
$scope.order.push({prodid: $scope.prodid, prodname: $scope.prodname, aantal: 1, price: $scope.price, size: 'M', extras: ''});
$event.currentTarget.innerHTML = 1;
}
else if($scope.order.length > 0){
for(var b = 0; b<$scope.order.length;b++)
{
if($scope.order[b].prodid == pid)
{
$scope.pzelfdeid = $scope.order[b].prodid;
$scope.pzelfde = b;
}
}
if($scope.pzelfde > -1)
{
$scope.order[$scope.pzelfde].aantal++;
$event.currentTarget.innerHTML = $scope.order[$scope.pzelfde].aantal;
}
else
{
$scope.order.push({prodid: $scope.prodid, prodname: $scope.prodname, aantal: 1, price: $scope.price, size: 'M', extras: ''});
$event.currentTarget.innerHTML = 1;
}
}
}
}])
HTML
<!-- CATEGORY 1 -->
<ons-template type="text/ons-template" id="lattes.html">
<ons-carousel swipeable overscrollable auto-scroll style="height: 100%; width: 100%;">
<ons-carousel-item>
<ons-list>
<ons-list-item style="height:60px" ng-repeat="product in products | filter:search | orderBy: 'category'">
<ul style="display:inline; text-decoration:none; list-style-type:none;">
<li style="width: 30px; height:53px; float:left; padding:7px 0 0 5px; font-size:30px; color:gray; font-weight:thin; border-right:1px solid #ddd;"><a href="#" id="aantal" style="padding-top:10px;" ng-click="productAdd($event,product.name, product.id, product.price)">+</a></li>
<li style="width:65%; float:left; padding-left:5px;">
<ons-col width="100%" style="float:left; border-right:1px solid #F7F7F7;">
<div class="name" style="height:20px; margin:0; padding:0 0 0 20px; font-size:16px; ">
{{product.name}}
</div>
<div class="desc" style="padding:0 0 0 20px; font-size:11px; position:absolute; top:20px;">
{{product.description}}
</div>
</ons-col>
</li>
<li style="width: 15px; height:53px; float:right; padding:7px 4px 0 6px; text-align:right; font-size:30px; color:gray; font-weight:thin; border-left:1px solid #ddd;"><a href="#" id="aantal" style="padding-top:10px;" ng-click="productRemove($event, product.id)">-</a></li>
</ul>
</ons-list-item>
</ons-list>
</ons-carousel-item>
</ons-carousel>
</ons-template>
<!-- BOTTOM OVERVIEW -->
<ons-bottom-toolbar onclick="" style="height:60px; background-color:#5C97BF;;">
<div style="padding-top:5px; width:90%; margin:0 auto;">
<div style="width:25px; margin:0 auto;"><a href=""; ng-click="modal()"><img src="../images/uparrow.png"/></a></div>
<p style="width:25%; padding-top:10px; margin-top:0; float:left; color:white; font-size:14px;">{{getQuantity()}}</p>
<p style="width:50%; padding-top:10px; margin-top:0; float:left;text-align:center;color:white;font-size:14px;"> PERSONALIZE </p>
<p style="width:25%;padding-top:10px; margin-top:0; float:left;text-align:right;color:white;font-size:14px;">{{getPrice()}}</p>
</div>
</ons-bottom-toolbar>
<!-- MODAL CHECKOUT -->
<ons-modal var="modal">
<ons-page>
<ons-toolbar style="background-color:#5C97BF; height:60px;margin-bottom:40px;">
<div class="left" style="padding:20px;"><a href=""; ng-click="modalhide()"><img src="../images/backarrow.png"/></a></div>
<div class="right" style="padding:20px;"><a ng-click="sendOrder(order)"><i class="fa fa-send fa-fw" style="color: white"></i></a></div>
</ons-toolbar>
<div style="background-color:white; width:100%; height:50px;margin-top:15px;padding:0; border-bottom:1px solid rgb(247, 247, 247);">
<div class="left" style="padding-left:20px; width:20%; float:left;"><p>{{getQuantity()}}</p></div>
<div class="right" style="padding-right:20px; width:20%; float:right; text-align:right;"><p>{{getPrice()}}</p></div>
</div>
<ons-list width="100%" style="margin-top:20px;">
<ons-list-item class="list-item" style="height:50px;width:100%;margin:0 auto;padding:0;" ng-repeat="o in order">
<ons-carousel swipeable style="height: 50px;" initial-index="0" auto-scroll>
<ons-carousel-item style="height:60px;" class="list-action-item" style="width:100%;height:50px !important;">
<ons-row style="height:50px">
<ons-col width="13%" style="float:left; padding:0; margin:0; border-right:1px solid #F7F7F7;">
<p style="padding:4px 0 0 18px; height:53px; margin:0;">{{o.aantal}}</p>
</ons-col>
<ons-col width="72%" style="float:left; border-right:1px solid #F7F7F7;">
<div class="name" style="height:20px; margin:0; padding:0 0 0 20px; font-size:16px; ">
{{o.prodname}}
</div>
<div class="desc" style="padding:0 0 0 20px; font-size:11px; position:absolute; top:15px;">
{{o.extras}}
</div>
</ons-col>
<ons-col width="15%" style="float:left;">
<p style="padding:4px 0 0 18px; height:50px; margin:0;">{{o.size}}</p>
</ons-col>
<!-- <ons-row style="height:50px">
<ons-col width="80%" style="float:left; padding-left:13%;">
<a>Skim milk</a>
<a>Soya milk</a>
<a>Extra espresso shot</a>
<a>Extra syrup</a>
<a>Whipped cream</a>
</ons-col>
</ons-row> -->
</ons-carousel-item>
<ons-carousel-item class="list-action-menu" style="color:white; height:60px; background:rgba(0,0,0, .6);">
<p style="width:30%; float:right; text-align:right; padding:4px 20px 0 0; height:60px; margin:0;">remove<a ng-click="productRemove($event, o.prodid, o.prodname)"><i class="fa fa-times fa-fw" style="color: white"></i></a></p>
<p style="width:30%; float:left; padding:4px 0 0 10px; height:50px; margin:0; font-size:14px; font-weight:100; opacity:0.3;">cancel<i class="fa fa-arrow-right fa-fw" style="color:white; padding-right:20px;"></i></p>
</ons-carousel-item>
</ons-carousel>
</ons-list-item>
</ons-list>
</ons-page>
</ons-modal>
</ons-template>
<!-- MODAL CHECKOUT -->
</div>
现在，在菜单中显示ng-repeat="product in products"，但ng-repeat="o in order"未显示其数据。在html中创建了适当数量的行（每个o按顺序排列）并显示给用户（如下图所示），但产品名称和数量等未显示......？这只在safari和iOS中？
有人解决这个问题吗？
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？