Question

我有一个使用angularJS填充位置数据的表单。该表单有3个下拉列表，用于位置类型，时区和父级。对于现有位置，我希望在加载数据时在下拉列表中选择属性。但是，在以下实现中，将填充下拉列表，但不会选择值。

HTML：

                <tr>
                    <td style="width:20%"><label for="locationType">{{'_LocationTypeLabel_' | i18n}}:</label></td>
                    <td style="width:25%"><select data-ng-model="vm.locationSettings.basicSettings.locationType.locationTypeId" data-ng-options="l.locationTypeDisplayName for l in vm.locationTypes track by l.locationTypeId" /></td>
                    <td style="width:20%"><label for="parent">{{'_LocationParentLabel_' | i18n}}:</label></td>
                    <td style="width:25%"><select data-ng-model="vm.locationSettings.basicSettings.parent" data-ng-options="l.locationName for l in vm.parentLocations track by l.locationId" /></td>  
                </tr>
                <tr>
                    <td style="width:20%"><label for="timezone">{{'_TimeZonesLabel_' | i18n}}:</label></td>
                    <td style="width:25%"><select data-ng-model="vm.locationSettings.basicSettings.timeZone" data-ng-options="l.displayName for l in vm.timeZones track by l.timeZoneId" /></td>
                    <td></td>
                    <td></td>
                </tr>

控制器：

function loadLocationData() {
        clientcontext.clientlookup.getAllPublic().then(function (data) {
            for (var i = 0; i < data.results.length; i++) {
                vm.locationTypes.push(data.results[i]);
            }
            clientcontext.location.getLocations(vm.clientId, 1)
              .then(function (data) {
                  for (var i = 0; i < data.length; i++) {
                      vm.parentLocations.push(data[i]);
                  }
                  systemcontext.systemlookup.getTimeZones()
                    .then(function (data) {
                        for (var i = 0; i < data.length; i++) {
                            vm.timeZones.push(data[i]);
                        }
                        //set the location attributes
                        vm.locationSettings.basicSettings = basicSettingsFactory.init().then(function () {
                            systemcontext.systemlookup.getTimeZoneById(vm.locationSettings.basicSettings.timeZone)
                           .then(function (data) {
                               vm.locationSettings.basicSettings.timeZone = data;
                           });
                        });
                    });
              });
        });
    }

使用单独的工厂填充位置属性，如 - vm.locationSettings.basicSettings = basicSettingsFactory.init()

 function basicSettingsFactory($q, $http, $route, $location, $rootScope, $window, common, clientcontext, localize) {
    var basicLocationSettings = {};

    function getLocationDetails() {
        clientcontext.location.getLocationById($route.current.params.clientId, $route.current.params.id)
  .then(function (data) {
      basicLocationSettings.id = data.locationId;
      basicLocationSettings.parent = data.fkParentLocationId;
      basicLocationSettings.locationType = data.locationType;
      basicLocationSettings.locationName = data.locationName;
      basicLocationSettings.locationDisplayName = data.locationDisplayName;
      basicLocationSettings.locationCode = data.locationCode;
      basicLocationSettings.isActive = data.activeStatus;
      basicLocationSettings.timeZone = data.fkTimeZoneId;
  });
    }
    return {

        // Initializes the entire monitoring probe scope variables.
        init: function () {
            getLocationDetails();
            return basicLocationSettings;
        }

    };
}
})();

有人可以指出我做错了什么，没有在下拉菜单中设置选定的值吗？

提前致谢

更新：可能的问题是，属性locationtype有一个整数值，如3，但是下拉列表中绑定的是一个LocationType对象？

Answer 1

查看更新的代码，它可能会对您有所帮助。

 function basicSettingsFactory($q, $http, $route, $location, $rootScope, $window, common, clientcontext, localize) {
    var basicLocationSettings = {};
     // Need to put the default Ids for selection display.
     //The code look like this
     basicLocationSettings.id = default; //defaylt Id

    function getLocationDetails() {
    clientcontext.location.getLocationById($route.current.params.clientId, $route.current.params.id)
      .then(function (data) {
          basicLocationSettings.id = data.locationId;
          basicLocationSettings.locationName = data.locationName;
          basicLocationSettings.locationDisplayName = data.locationDisplayName;
          });
    }
    return {
        // Initializes the entire monitoring probe scope variables.
        init: function () {
            getLocationDetails();
            return basicLocationSettings;
        }

    };
}
})();

绑定下拉列表并使用angularJS设置选定的值

HTML：

控制器：

1 个答案: