AngularJs ng-options 与 promises 问题

Question

我正在创建一个页面，其中包含可以修改作业的表单。当页面加载时，将触发以下承诺链，它获取当前作业数据并填充表单。

我对城市有问题select，因为只有返回工作数据时我才能知道省和城市的值。在这个阶段，创建了另一个承诺来建造城市 select 但是当它被解决时，城市 select 的 selected 值 - 填充有城市 - 没有被设置为 $ scope.job.city 不知道为什么。

  api.getJobCategories()
      .then(function (responseObject) {
          $scope.jobCategories = responseObject.data;
          return api.getJob({
              job_id: $routeParams.job_id
          });
      })
      .then(function (responseObject) {
          $scope.job = responseObject.data;
          // $scope.job.city has correct city value
          return api.getProvinceCities({
              province_name: $scope.job.province,
              asJson: true
          });
      })
      .then(function (responseObject) {
          // Issue: $scope.job.city has correct value but after building
          // the cities select $scope.job.city value is not applied to cities select
          $scope.cites = responseObject.data;
      });

模板

<form name="formjob" class="css-form" novalidate>
... more controls

<!-- Issue job.city model value does not bind to control -->
<select
   ng-model="job.city" 
   ng-options="city.city_name as city.label for city in cites"
   name="city"
   class="form-control"
   required="" >                 
</select>

</form>

可能的解决方法很慢，因为必须等待所有 3 个承诺都解决

var job = null;
api.getJobCategories()
    .then(function (responseObject) {
        $scope.jobCategories = responseObject.data;
        return api.getJob({
            job_id: $routeParams.job_id
        });
    })
    .then(function (responseObject) {
        job = responseObject.data; // store in temp var
        return api.getProvinceCities({
            province_name: job.province,
            asJson: true
        });
    })
    .then(function (responseObject) {
        $scope.cites = responseObject.data;
        $scope.job = job; // assign job scope only after cites select has been built
    });

JB Nizet 的建议有效

var job, city;
job = city = null;
api.getJobCategories()
    .then(function (responseObject) {
        $scope.jobCategories = responseObject.data;
        return api.getJob({
            job_id: $routeParams.job_id
        });
    })
    .then(function (responseObject) {
        job = responseObject.data;
        city = job.city; // store city in temp var
        job.city = null; // or delete job.city 
        $scope.job = job;
        return api.getProvinceCities({
            province_name: job.province,
            asJson: true
        });
    })
    .then(function (responseObject) {
        $scope.cites = responseObject.data;
        $scope.job.city = city; // reassign city
    });

Answer 1

JB Nizet 的建议有效

var job, city;
job = city = null;
api.getJobCategories()
    .then(function (responseObject) {
        $scope.jobCategories = responseObject.data;
        return api.getJob({
            job_id: $routeParams.job_id
        });
    })
    .then(function (responseObject) {
        job = responseObject.data;
        city = job.city; // store city in temp var
        job.city = null; // or delete job.city 
        $scope.job = job;
        return api.getProvinceCities({
            province_name: job.province,
            asJson: true
        });
    })
    .then(function (responseObject) {
        $scope.cites = responseObject.data;
        $scope.job.city = city; // reassign city
    });

AngularJs ng-options 与 promises 问题

AngularJs ng-options with promises issue

angularjs

angular-promise