javascript - 获取数据以在 ng-options 中显示，但设置动态默认值

Question

用户对象可用于填充表单的 View 。显示信息的元素之一是下拉菜单。提出了两个请求。一个用于用户信息，另一个用于时区列表。两者都是通过 ui-router 状态解决的，如下所示:

.state('app.userprofile', {
        url: '/userprofile',
        component: 'user',
        resolve: {
            user: ['userService', function(userService) {
                return userService.fetchUser();
            }],
            timezones: ['timezoneService', function(timezoneService){
                return timezoneService.fetchUsaTimeZones();
            }]
        }
    })
}]);

我读过 article我在网上发现select元素无法填充用户时区后，select元素仍然无法显示信息。

问题

如何使用用户对象中的数据填充默认选择选项，但填充第二个响应中的选项。

<label for="timezones">Time Zone</label>
    <div>
        <select name="timezones"
            ng-init="userTimezone = $ctrl.user.business.timezone"
            ng-change="userTimezone = userTimezone.abbr"
            ng-model="userTimezone" 
            ng-options="item as item.abbr for item in $ctrl.timezones track by item.abbr" class="form-control">
            <option value="">{{userTimezone}}</option>
        </select>
        <p>{{userTimezone}}</p>
    </div>


//SECOND REQUEST FOR TIMEZONES
app.factory('timezoneService', ['$http', '$q', function($http, $q){

    var factory = {};

    factory.fetchUsaTimeZones = function() {

        var deferred = $q.defer();

        $http.get('../../p3sweb/assets/json/ustimezones.json')
        .then(
            function(response){
                console.log(response.data.ustimezones)
                deferred.resolve(response.data.ustimezones)
            },
            function(errResponse){
                deferred.resolve(errResponse)
            }
        );

        return deferred.promise;
    }

    return factory;

}])

<小时/>

{
  "ustimezones": [
  {
    "value": "Hawaiian Standard Time",
    "abbr": "HST",
    "offset": -10,
    "isdst": false,
    "text": "(UTC-10:00) Hawaii",
    "utc": [
      "Etc/GMT+10",
      "Pacific/Honolulu",
      "Pacific/Johnston",
      "Pacific/Rarotonga",
      "Pacific/Tahiti"
    ]
  },
  {
    "value": "Alaskan Standard Time",
    "abbr": "AKDT",
    "offset": -8,
    "isdst": true,
    "text": "(UTC-09:00) Alaska",
    "utc": [
      "America/Anchorage",
      "America/Juneau",
      "America/Nome",
      "America/Sitka",
      "America/Yakutat"
    ]
  }
  ]
}

更新

当我将 ng-model 的值设置为 $ctrl.user.business.timezone 时，它抛出错误，因此我将其存储在变量中 userTimezone 通过 ng-init 指令。更新了代码

更新2

我已经半工作了。它会更新所有字段，但会抛出不一致的 405 错误。不会撒谎，我正处于那种“这到底是怎么回事”的情况之一。

<select name="timezones"
    ng-init="userTimezone._abbr = {abbr: $ctrl.user.business.timezone}"
    ng-change="$ctrl.user.business.timezone = userTimezone._abbr"
    ng-model="userTimezone._abbr" 
    ng-options="zone.abbr as zone.text for zone in $ctrl.timezones track by zone.abbr" class="form-control">
<option value="">{{userTimezone._abbr}}</option>
</select>
<p>{{userTimezone._abbr}}</p>

Answer 1

您可以选择复杂的对象。 Angular 在检查默认值(通过 ng-model 属性设置)时会进行相等比较，因此对于对象，它会比较对象引用(通过生成的 $$hashkey 属性) )。因为您有两个不同的对象引用，一次来自时区列表，一次来自用户，它们的哈希键是不同的。因此，它们被视为“不相等”，因此不会设置默认值。

如果您扩展 ng-options 属性以使用 track by，您可以选择一个独特的原始属性，其中相等比较更有意义(例如缩写) 。然后，Angular 将使用此属性代替 hashkey 进行相等性/唯一性比较。

所以你会有类似的东西

<select name="timezones" ng-model="$ctrl.user.business.timezone" ng-options="item as item.abbr for item in $ctrl.timezones track by item.abbr"></select>