Question

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

我遇到城市选择的问题，因为只有在返回工作数据时才会知道省和城市的价值。在这个阶段，创建了另一个承诺来构建城市选择，但是当它被解析时，选择的城市选择值 - 用城市填充 - 不被设置为$ 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

1 个答案: