Question

我尝试加载一个下拉列表，其响应来自http post。但它未能加载子选项卡。

当我从tab1点击下一个按钮时。我打了一个电话后回来了JSON。使用返回的数据我想在第二个选项卡中加载下拉列表。

我已经在tabset上提出了一个查询，它运行正常。现在我修改了一下plunker。我按照以下链接中提到的方式做了同样的事情。但是当我尝试使用$ http.get

做同样的事情时，我错过了一些东西

app.js

angular.module('plunker', ['ui.bootstrap'])

.service('Common', function() {
  this.tabData = {};
})

.controller('SampleController', function($scope, $http, Common) {
  $scope.submitTab1 = function() {
    $http.get("post.json", {
      // Some logic
    }).success(function(data) {
      Common.tabData = data;
      $scope.steps.step2 = true;
    });
  }
})

.controller("SampleTab2Controller", function($scope, Common) {
  $scope.userList = Common.tabData;
});

HTML

  <tabset ng-init="steps={step1:true, step2:false}"> 

   <tab heading="Step 1" active="steps.step1">
    <div data-ng-controller="SampleController">      
      <form data-ng-submit="submitTab1()">
           <label>Some Operations ...</label>
           <br>
           <br>
           <label>Click next to retrieve json from server  ...</label>
          <button type="submit">Click Next</button>
      </form>
    </div>    
    </tab>

    <tab heading="Step 2" active="steps.step2">
    <div data-ng-controller="SampleTab2Controller">
      <form name="step2">
         <p>load the json list from Tab1 controller </p>
        <select ng-model="selectedUser" ng-options="user.title for user in userList">
          <option value="">--- select ---</option>
        </select>
      </form>
      </div>
    </tab>

  </tabset>

Post.json

[
   {
      "id": 1,
      "title": "Arnold"
   },
   {
      "id": 2,
      "title": "stallone"
   }
]

Plunker Code http://plnkr.co/edit/EZC1d6tDDZlpWZUHY6os?p=preview

Answer 1

您的问题与从http加载无关，但它与正确复制对象的引用有关。

执行$scope.userList = Common.tabData;时，tabData的引用被复制到userList，然后当使用Common.tabData = data更新tabData时，服务中的tabData指向不同的引用并且$scope.userList保持不变指着旧的。因此，不是获取tabData的引用并将其复制到userList，而是在作用域上设置服务对象本身。

在您的控制器中将$scope.userList = Common.tabData更改为$scope.userList = Common： -

.controller("SampleTab2Controller", function($scope, Common) {
  $scope.userList = Common;
});

并在视图中迭代userList.tabData

  <select ng-model="selectedUser" ng-options="user.title for user in userList.tabData">

<强> Plnkr

Answer 2

如果我以这种方式修改你的代码

1）将tabData更改为数组 2）使用angular.copy而不是asignning

.service('Common', function() {
  this.tabData = [];  ==> Changed this to array
})


$http.get("post.json", {
        // Some logic
}).success(function(data) {
    angular.copy(data,Common.tabData);  ==> Used angular copy so it copies the array
    $scope.steps.step2 = true; 
});

更新了Plnkr

Answer 3

代码中的主要问题是首先执行controller get，然后加载Common.tabData.so可以这样做：

angular.module('plunker', ['ui.bootstrap'])

.service('Common', function() {
  this.tabData = {};
})

.controller('SampleController', function($scope,$http, Common) {
  $scope.submitTab1 = function() {
            $http.get("post.json", {
                // Some logic
            }).success(function(data) {
                Common.tabData = data;
                $scope.steps.step2 = true; 
            });
        }
})

.controller("SampleTab2Controller", function($scope, Common) {
  $scope.userList = Common;

});

和根据这个的HTML代码是：

<div data-ng-controller="SampleTab2Controller">
      <form name="step2">
         <p>load the json list from Tab1 controller </p>
        <select ng-model="selectedUser" ng-options="user.title for user in userList.tabData">
          <option value="">--- select ---</option>
        </select>
      </form>
      </div>

无法在ui tabset子选项卡中加载$ http.get - JSON数据

3 个答案: