0

私はそのようなhtmlコードを持っています

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

からデータを取得するためですが、データを取得AngularJsしJayDataた後select dropdown、デフォルトでは選択されていない値が表示されます。ng-init属性には何を書くべきか

4

1 に答える 1

3

ng-model="foodCatagory"たとえば、コントローラーでプリセットすることができます。

$scope.foodCatagory = $scope.foodCatagories[0];

または、次のように ng-init を使用します。

ng-init="foodCatagory = foodCatagories[0]"

foodCatagories非同期でロードすると、ディレクティブのコンパイル時にデータが利用できない可能性が高く、機能しないことに注意してくださいng-init。

jQuery Mobile は追加の DOM 要素を使用して選択を表示および処理するため、データが読み込まれ、選択された値が設定されたときに、jQuery Mobile 自体を更新するように指示する必要があります。

たとえば、それを処理するディレクティブを作成できます。

app.directive('selectMenuRefresh', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var unbindWatcher = scope.$watch(attrs.ngModel, function(newValue, oldValue) {
        if (newValue && oldValue === undefined) {
          element.selectmenu('refresh');
          unbindWatcher();
        }
      });
    }
  };
});

そしてそれを選択要素に置きます：

<select id="selectCatagoryFood" select-menu-refresh data-role="listview" data-native-menu="true" ng-options="foodCatagory as foodCatagory.Description for foodCatagory in foodCatagories" ng-model="foodCatagory" ng-change="changeFoodCatagory(foodCatagory)"></select>

このディレクティブは$watch、変更を検出するためにa を使用しngModelます。newValue があり ($scope.foodCatagory = $scope.foodCatagories[0];が実行されたときに存在する)、oldValue が存在する場合undefined(最初の選択オプションが空のときに初めて発生する)、select 要素で refresh が呼び出されます。また、バインドを解除し$watchます。必要に応じて変更してください。

例: http://plnkr.co/edit/GLelHd?p=preview

注: jQuery および jQuery Mobile が AngularJS の前にロードされていることを確認してください。

于 2013-10-26T17:30:47.293 に答える