WebSQL数据放入AngularJs DropDown

我有一个简单的问题，关于从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添加数据初始化。我已经从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获取到我的应用程序

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

编辑：现场演示

.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元素。它将从控制器的$scope中获取foodCategories变量，对于集合中的每个item，它将使用 text 属性作为显示的标签(<option>{{item.text}}</option>') and it will select the whole object项as the value of the selected选项. You could also refer to a property as the value like ( {{item.text}} ). Then your ng-model would be set to the id' 值的选定选项。

指令 ng-model 对应于控制器$scope中的变量，该变量将保存所选选项的值。

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

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

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

您确实使用 ng-init 指令选择了第一个选项，但知道您可以将控制器中的 ng-model 变量设置为所需的默认值，也可以将其设置为默认值。

.js

在这里，我尝试通过在执行异步请求的情况下返回承诺来模拟您的数据库服务。我使用 $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中设置一个默认值，该值将用于设置所选选项。

myApp.controller('FoodSelection',function($scope, DbFoodCategories){
    DbFoodCategories.get().then(
        // the callback if the request was successfull
        function (response) {
             $scope.foodCategories = response; //response is the data we sent from the service
        },
        // the callback if an error occured
        function (response) {
             // response is the error message we set in the service
             // do something like display the message
        }
    );
    // $scope.foodCategory = defaultValue;
    $scope.changeFoodCategory = function() {
        alert($scope.foodCatagory.value);
    }
});

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

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

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

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

当然，前提是食品集团有正确的领域

相关内容

最新更新

热门标签：