angularjs - WebSQL data into AngularJs DropDown

Question

I have very simple question about getting data from WebSql I have DropDown i.e

<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>

now i want to add data init from webSQL. I already get Data from webSql but i am confuse that how to add that data into DropDown An example or hints maybe very helpful for me.

Update 1 :: Add Controller Code

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

Update 2 webSQL and 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);
    });
}

Update 3

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

Update 4 One thing that i didn't mention is that I am using JayData for getting data from webSQL to my App

Answer 1

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

编辑：现场演示

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您选择的元素。它将从集合中的控制器和 foreach中获取foodCategories变量，它将使用该属性作为显示的标签（项目选项{{item.text}} ng-model id` 所选选项的值。$scopeitemtext<option>{{item.text}}</option>') and it will select the whole objectas the value of the selected. You could also refer to a property as the value like (). Then yourwould be set to the

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

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

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

If no default value is set, angular will add an empty option which will be removed when an option is selected.

您确实使用该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);
    }
});

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

Answer 2

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

Answer 3

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

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

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