【问题标题】:How to set a DropDown List value taken from a promise with a value taken from another promise如何设置从一个承诺中获取的下拉列表值和从另一个承诺中获取的值
【发布时间】:2015-10-01 15:28:17
【问题描述】:

我想了解如何在 DropDown List 中成功设置一个由 promise 填充的值。要设置的值将从另一个 Promise 中获取,该 Promise 将使用 JSON 结构填充表单。

在我的特殊情况下,发生率如下

下拉列表构建为:

1) HTML 模板(Jade)

select(name="inputUserRelationship",
       ng-model="myForm.relationship",
       ng-options="relationshipOption as relationshipOption.value for relationshipOption in relationships track by relationshipOption.id",
       ng-init="myForm.insuredRelationship = relationships[0]")
    option(value="") -- SELECT -- 

2) 控制器:

$scope.getRelationTypes = function(){
 HttpSrv.get('api/getRelationTypes/').then(function(results){
    $scope.relationships = results;
 }); };

表格在Controller中填写如下:

$scope.getFormInformation = function(ID){
HttpSrv.get('/api/getFormInfo/' + ID).then(function(results){
  if(results)
  {
    $scope.fillForm(results);
  }
}); };

$scope.fillForm = function(filledFormData){
     $scope.myForm.relationship = filledFormData.relationnshipID; };

这会在我的 JS 调试控制台上产生以下问题:

  1. 值在模型上设置
  2. 下拉列表保持默认的空值 ([0])。
  3. 当我尝试更改下拉列表中的选定选项时,它会产生以下 JS 控制台错误。

TypeError:无法分配给 9 的只读属性“id” 在二传手(vendor.js:42989) 在 Lexer.readIdent.token.fn.extend.assign (vendor.js:42424) 在validationErrorKey.$setViewValue (vendor.js:49629) 在 vendor.js:53523 在 Scope.promises.$get.Scope.$eval (vendor.js:44729) 在 Scope.promises.$get.Scope.$apply (vendor.js:44827) 在 HTMLSelectElement。 (vendor.js:53465) 在 HTMLSelectElement.jQuery.event.dispatch (vendor.js:4641) 在 HTMLSelectElement.jQuery.event.add.elemData.handle (vendor.js:4309)

非常感谢任何信息。我已经研究和测试了 $scope.apply()$q 选项,尽管我知道它们指向正确的方向,但它们都没有成功。

干杯!

【问题讨论】:

    标签: angularjs pug angular-promise


    【解决方案1】:

    如果您的 $http API 调用返回的 json 格式为:

    [{"id":"1", "value":"Dropdown desc"}, {...}, {}] 
    

    您应该设置一个具有相同结构的对象字面量,以将下拉列表设置为特定值,例如:

    $scope.myForm.relationship = {"id":"1", "value":"Dropdown desc"};
    

    【讨论】:

      猜你喜欢
      • 2017-05-29
      • 1970-01-01
      • 1970-01-01
      • 2018-05-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-07-19
      相关资源
      最近更新 更多