选择价值AngularJs和JQueryMobile不INIT [英] Select Value not Init in AngularJs and JQueryMobile

问题描述

我有一个HTML code一样，

i have a html code like that

<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 获取数据，但得到的数据后选择下拉列表未选择值默认情况下它显示为空。我应该怎么写 NG-INIT 属性

for getting data from AngularJs and JayData but after getting data select dropdown not selected value by default it show empty. what should i write in ng-init attribute

推荐答案

您既可以preSET NG-模式=foodCatagory控制器，例如

You can either preset ng-model="foodCatagory" in the controller, for example:

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

还是用NG-INIT是这样的：

Or use ng-init like this:

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

请注意，如果您将 foodCatagories 异步数据将最有可能不能当指令编译，这意味着 NG-INIT 将无法工作。

Note that if you load your foodCatagories asynchronously the data will most likely not be available when the directive compiles, which means ng-init will not work.

由于jQuery Mobile的使用额外的DOM元素来显示和处理选择，你需要告诉它刷新自己在数据加载并已设置选择的值。

Since jQuery Mobile uses additional DOM elements to show and handle the select, you will need to tell it to refresh itself when the data has loaded and you have set the selected value.

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

You can for example write a directive to handle it:

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>

此指令使用 $观看来检测 ngModel 更改时。如果有一个为newValue（其中有会当 $ scope.foodCatagory = $ scope.foodCatagories [0]; 执行）和属性oldValue为未定义（这将是在第一选择选项是空的第一次），它会调用select元素上刷新。它也将取消绑定 $观看。您的需求后，修改。

This directive uses a $watch to detect when the ngModel changes. If there is a newValue (which there will be when $scope.foodCatagory = $scope.foodCatagories[0]; is performed) and the oldValue is undefined (which it will be the first time when the first select option is empty), it will call refresh on the select element. It will also unbind the $watch. Modify after your needs.

例如： http://plnkr.co/edit/GLelHd?p=preVIEW

请注意：确保jQuery和jQuery Mobile的是AngularJS之前加载

Note: Make sure that jQuery and jQuery Mobile is loaded before AngularJS.

这篇关于选择价值AngularJs和JQueryMobile不INIT的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！