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 元素来显示和处理选择，因此您需要告诉它在数据加载并设置选择值时自行刷新。

例如，您可以编写一个指令来处理它：

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>

该指令使用 a$watch来检测何时ngModel发生更改。如果有 newValue（执行时会有$scope.foodCatagory = $scope.foodCatagories[0];）并且 oldValue 是undefined（当第一个选择选项为空时将是第一次），它将在选择元素上调用刷新。它还将取消绑定$watch. 根据您的需要进行修改。

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

注意：确保 jQuery 和 jQuery Mobile 在 AngularJS 之前加载。

于 2013-10-26T17:30:47.293 回答