Question

关于从WebSql获取数据，我有一个非常简单的问题我有DropDown即

<select id="selectCatagoryFood" data-role="listview" data-native-menu="true"
                ng-init="foodCatagory = foodCatagories.cast[0]"
                ng-options="foodCatagory as foodCatagory.text for foodCatagory in foodCatagories.cast"
                ng-model="foodCatagory"
                ng-change="changeFoodCatagory()">
                </select>

现在我想从webSQL添加数据init。我已经从webSql获取了数据，但我很困惑如何将这些数据添加到DropDown 一个例子或提示可能对我很有帮助。

更新1 ::添加控制器代码

myApp.controller('foodSelection',function($scope,foodCatagories){
$scope.foodCatagories = foodCatagories;
$scope.changeFoodCatagory = function(){
    alert($scope.foodCatagory.value);
}
});

更新2 webSQL和JayData

_context.onReady({
    success: showData,
    error: function (error){
        console.log(error);
    }
});

function showData(){
    var option = '';
    _context.FoodGroup.forEach(function(FG)
    {
        option += '<option value="'+FG.FoodGroupID+'">'+FG.Description+'</option>';
    }).then(function(){
        console.log(option);
    });
}

更新3

var myApp = angular.module('myApp',[]);
myApp.factory('foodCatagories',function(){
     var foodCatagories = {};
     foodCatagories.cast = [
     {
         value: "000",
         text: "Select Any"
    }
    ];
return foodCatagories;
});

更新4 我没有提到的一件事是我使用JayData从webSQL获取数据到我的应用

Answer 1

我将尝试解释它是如何工作的：

编辑：Live demo

<强> HTML

这是你的精简版选择。

<select ng-options="item as item.text for item in foodCategories"
        ng-model="foodCategory"
        ng-required="true"
        ng-change="changeFoodCategory()">
</select>

指令ng-options将自动填充您的选择中的option元素。它将使用您的控制器的foodCategories中的$scope变量和集合中的fore item，它将使用text属性作为显示的标签（{{1} } item <option>{{item.text}}</option>') and it will select the whole object选项as the value of the selected {{item.text}} . You could also refer to a property as the value like ( ng-model ). Then your id`所选选项的值。

指令would be set to the对应于控制器的ng-model中的变量，该变量将保存所选选项的值。

指令$scope允许您检查是否已选择值。如果您使用的是表单，则可以检查该字段是否有效ng-required。有关表单验证的更多详细信息，请参阅文档。

指令formName.ngModelName.$valid允许您在所选选项更改时执行函数。您可能希望将ng-change变量作为参数传递给此函数，或通过控制器内的ng-model调用变量。

如果未设置默认值，则angular将添加一个空选项，选择选项时将删除该选项。

您确实使用了$scope指令来选择第一个选项，但是知道您可以将控制器中的ng-init变量设置为您想要的默认值或者没有。

js

在这里，我尝试通过在您执行异步请求的情况下返回promise来模拟数据库服务。我使用ng-model服务创建了一个promise，$q伪造了对数据库的调用。

$timeout

在控制器中设置将在视图中使用的变量。因此，您可以致电myApp.factory('DbFoodCategories', function($q, $timeout) { var foodCategories = [ { id: 1, text: "Veggies", value: 100 }, { id: 2, text: "Fruits", value: 50 }, { id: 3, text: "Pasta", value: 200 }, { id: 4, text: "Cereals", value: 250 }, { id: 5, text: "Milk", value: 150 } ]; return { get: function() { var deferred = $q.defer(); // Your call to the database in place of the $timeout $timeout(function() { var chance = Math.random() > 0.25; if (chance) { // if the call is successfull, return data to controller deferred.resolve(foodCategories); } else { // if the call failed, return an error message deferred.reject("Error"); } }, 500); /* // your code _context.onReady({ success: function() { deferred.resolve(_contect.FoodGroup); }, error: function (error){ deferred.reject("Error"); } }); */ // return a promise that we will send a result soon back to the controller, but not now return deferred.promise; }, insert: function(item) { /* ... */ }, update: function(item) { /* ... */ }, remove: function(item) { /* ... */ } }; });服务将数据加载到DbFoodCategories，并设置$scope.foodCategories中用于设置所选选项的默认值。

$scope.foodCategory

我希望这有助于您更详细地了解正在发生的事情！

Answer 2

在新版本中，我们发布了一个支持AngularJS的新模块。我们已经开始记录如何使用它，您可以找到第一篇博文here 有了这个，您应该能够轻松创建下拉列表，无需手动创建选项。这样的事情可以解决问题：

myApp.controller('foodSelection',function($scope, $data) {
   $scope.foodCatagories = [];
   ...
   _context.onReady()
   .then(function() {
      $scope.foodCatagories = _context.FoodGroup.toLiveArray();
   });
});

前提是FoodGroup有正确的字段，当然

Answer 3

请参阅此example以及如何使用$ apply更新范围内的数据。

WebSQL数据导入AngularJs DropDown

3 个答案: