我正在创建使用的应用程序，当我使用jaydata angularjs j query mobile和存储所有数据创建上下文时，现在我开始使用并将其附加到html 页面中。我认为这是绑定能力但是当我添加数据并将其记录在数据库中但在我刷新整个页面之前不会显示在页面上这是我正在运行的应用程序webSqldatabasejaydatawebSqlangularjsj query mobileangularjs2-way
我的流程的一些图像如下
应用程序主屏幕
点击食物日志下面的屏幕第一次是空的，因为还没有记录数据
然后点击plus button右上角的添加新日志
现在用如下数据填充它
然后单击添加食物日志，然后出现以下屏幕
但实际上它必须看起来像这样，但为此我需要手动刷新页面
正如我们所知，angularJs提供 2 方式绑定，所以在这个问题上不需要刷新帮助我这是一个单页结构J Query Mobile
更新代码
// JavaScript File For Controlling Food Module
var myApp = angular.module('myApp',[]);
myApp.controller('foodSelection',function($scope,$location)
{
var isSubmit = "false"; // Check Before Logging. Is All Field Fill oOr Not?
_context.onReady(
{
success: function()
{
try
{
_context.FoodGroup.toArray().then(function (foodCatagories)
{
$scope.$apply(function ()
{
try
{
$scope.foodCatagories = foodCatagories; // Attach Food Groups From DB To HTML Component
}
catch(error)
{
console.log("Inner Try "+error);
}
});
});
}
catch(error)
{
console.log("Outer Try "+error);
}
},
error: function (error)
{
console.log("Error In Getting Data "+error);
}
}); // End Of Context Redy Check
$scope.changeFoodCatagory = function(foodGroupObject)
{
_context.FoodItem.filter("it.FoodGroup.FoodGroupID.startsWith('"+foodGroupObject.FoodGroupID+"')").toArray().then(function (foods)
{
$scope.$apply(function ()
{
try
{
$scope.foods = foods; // Attach FoodItem
}
catch(error)
{
console.log("Inner Try "+error);
}
})
});
}
$scope.changeFood = function(foodItemObject)
{
_context.FoodItemWeight.filter("it.FoodItem.FoodItemID.startsWith('"+foodItemObject.FoodItemID+"')").toArray().then(function (serveSizes)
{
$scope.$apply(function ()
{
try
{
$scope.serveSizes = serveSizes; // Attach ServeSize Of The Selected Food
}
catch(error)
{
console.log("Inner Try "+error);
}
})
});
}
$scope.changeServeSize = function(foodWeightObject)
{
var noOfServes = {};
noOfServes.cast = [{value: "1",text: "1"},{value: "2",text: "2"},{value: "3",text: "3"},{value: "4",text: "4"},{value: "5",text: "5"},{value: "6",text: "6"},{value: "7",text: "7"},{value: "8",text: "8"},{value: "9",text: "9"},{value: "10",text: "10"},{value: "11",text: "11"},{value: "12",text: "12"},{value: "13",text: "13"},{value: "14",text: "14"},{value: "15",text: "15"},{value: "16",text: "16"},{value: "17",text: "17"},{value: "18",text: "18"},{value: "19",text: "19"},{value: "20",text: "20"}];
$scope.noOfServes = noOfServes; // Attach No Of Servings
}
$scope.changeServeNo = function()
{
isSubmit = "true"; // Mark True As All Fields Are Select
}
$scope.go = function()
{
if(isSubmit == "true")
{
var date = Date.now();
var calcories = (($scope.food.Energ_Kcal/100)*$scope.serveSize.Gm_Wgt)*$scope.serveNo.value;
var quant = $scope.serveNo.value;
_context.FoodItem.filter("it.FoodItemID.startsWith('"+$scope.food.FoodItemID+"')").forEach(function (foods)
{
$scope.$apply(function ()
{
try
{
_context.User.filter("it.UserID.startsWith('"+1+"')").forEach(function(user)
{
_context.FoodLog.add({Quantity:quant,TotalCalories:calcories,DateTime:date,FoodItem:foods,User:user});
_context.saveChanges();
});
}
catch(error)
{
console.log("Inner Try "+error);
}
})
});
//$.mobile.changePage( "index.html#foodscreen")
$location.hash('foodscreen');
}
else
{
alert("Select All Fields");
return false;
}
} // End Of Go Function
}); // End Of Controller
myApp.controller('foodLogCtrl',function($scope,$route)
{
_context.onReady(
{
success: function()
{
try
{
_context.FoodLog.include("FoodItem").include("FoodItem.FoodGroup").toArray().then(function(foodLogs)
{
$scope.$apply(function ()
{
try
{
/*var totalCaloriesGained = 0;
for(var i=0; i<foodLogs.length; i++)
{
totalCaloriesGained += parseFloat(foodLogs[i].TotalCalories);
}
alert(totalCaloriesGained);*/
$scope.foodLogs = foodLogs; // Attach Food Logs From DB To HTML Component
}
catch(error)
{
console.log("Inner Try "+error);
}
});
});
}
catch(error)
{
console.log("Outer Try "+error);
}
},
error: function (error)
{
console.log("Error In Getting Data "+error);
}
}); // End Of Context Redy Check
$scope.deleteLog = function(id)
{
try
{
_context.FoodLog.filter('it.FoodLogID == '+id+'').forEach(function(foodlog)
{
_context.FoodLog.remove(foodlog);
_context.saveChanges();
//$route.reload();
});
}
catch(error)
{
console.log("Error Catch During Deletion "+error);
}
/*$.mobile.changePage( $("#foodscreen"),{
allowSamePageTransition: true,
transition: 'none',
reloadPage: true
});*/
$('#foodLoggedID_'+id).hide();
}//End Of Delete Function
});
myApp.controller('foodDetailLogCtrl',function($scope)
{
$scope.editLog = function(id)
{
//alert(id);
//var obj = [{foodName:"Hello"}];
try
{
_context.FoodLog.filter('it.FoodLogID == '+id+'').include("FoodItem").include("FoodItem.FoodGroup").toArray().then(function(foodDetails)
{
$scope.$apply(function ()
{
$scope.foodDetails = foodDetails;
});
});
}
catch(error)
{
console.log("Error Catch During Deletion "+error);
}
}
});
我这样写html
<ul id="foodloglist" data-role="listview" data-inset="true" data-icon="false" ng-controller="foodLogCtrl" data-split-theme="d" data-split-icon="delete">
<!--<li>
<input data-type="search" class="search" placeholder="Search" name="phonesListState.search" autofocus/>
</li>-->
<li ng:repeat="foodLog in foodLogs" id="foodLoggedID_{{foodLog.FoodLogID}}">
<a href="#foodLogDetail" ng-click="editLog(foodLog.FoodLogID);">
<img src="sm_images/128x128/food.png" class="ui-li-thumb" />
<span class="ui-li-heading">{{foodLog.FoodItem.Shrt_Desc}}</span>
<span class="ui-li-desc">{{foodLog.FoodItem.FoodGroup.Description}}</span>
<span class="ui-li-count">{{foodLog.TotalCalories}}</span>
</a>
<a href="#foodscreen" ng-click="deleteLog(foodLog.FoodLogID)" data-rel="popup" data-position-to="window" data-transition="pop">Delete</a>
</li>
</ul>