1

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);
}
});

アップデート 2webSQLと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 言及しなかったことの 1 つは、アプリJayDataからデータを取得するために使用していることです。webSQL

4

3 に答える 3

0

この例と、$apply を使用してスコープ内のデータを更新する方法を参照してください。

于 2013-10-20T13:26:02.770 に答える
0

それがどのように機能するかを説明しようとします：

編集：ライブデモ

html

これがあなたの簡素化された選択です。

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

ディレクティブは、選択した要素をng-options自動的に埋めます。コレクション内のコントローラーと foreachから変数をoption取得し、表示されるラベルとしてプロパティを使用します ( item option {{item.text}} ng-model id` 選択したオプションの値。foodCategories$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

デフォルト値が設定されていない場合、angular は、オプションが選択されると削除される空のオプションを追加します。

ディレクティブを使用して最初のオプションを選択しましたが、コントローラーの変数を希望するデフォルト値またはなしにng-init設定できることを知っています。ng-model

js

ここでは、非同期リクエストを実行している場合に promise を返すことで、データベース サービスをシミュレートしようとしました。この$qサービスを使用して promise を作成$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);
    }
});

これが、何が起こっているのかをより詳細に理解するのに役立つことを願っています!

于 2013-10-15T03:46:12.670 に答える
0

新しいバージョンでは、AngularJS をサポートする新しいモジュールをリリースしました。使用方法の文書化を開始しました。ここで最初のブログ投稿を見つけることができます。 これにより、オプションを手動で作成する必要がなく、ドロップダウンを簡単に作成できるはずです。このような何かがうまくいくはずです：

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

もちろん、FoodGroup に適切なフィールドがある場合

于 2013-10-15T15:11:23.400 に答える