2017-06-22 71 views
0

我正在使用Angular(1.6.4)选择一个网站上工作。如果第一次请求,则select元素的内容将通过REST加载。但是REST调用的响应被缓存,以便后面的调用从内存中加载数据。如果我加载网站的select元素是空的,我不能选择任何值。如果我使用缓存的数据再次访问站点,则选择框允许您从列表中选择项目。如果我将REST调用重定向到包含第一次尝试的数据的文件,我可以按预期方式选择项目角度选择不更新,如果模型更改

所以看起来代码原则上工作正常,但如果模型更新太晚,select元素会没有注意到这些变化。

这里是我使用的代码:

<select ng-model="myData" chosen 
     class="select--chosen" 
     ng-change="handleSelection()" 
     ng-options="myData as myData.value for myData in dataArray"> 
</select> 

控制器代码如下所示(网站打开时调用):

$scope.dataArray = []; 
//$scope.dataArray = [{value : "just a test value"}]; 
$scope.$watch('dataArray ', function() {console.log("dataArray was changed...")}, true); 

getArray(); 

function getArray() { 
    DataFactory.getArray().then(function (data) { 
    $scope.dataArray = data; 
    }); 
} 

我拿到手表消息时,我加载网站首次。在寻找解决方案时,我发现了几个提示,但没有一个为我工作。这是我的尝试:

1)添加

$scope.$apply(function(){ /* code */ }); 

设置dataArray中的该功能内或称之为手表功能的内部。在这两种情况下,我得到的摘要已更新或使控制台上的错误,这表明它时并不需要使用范围。$应用设置dataArray中的=数据后

2)使用

$scope.onChange($scope.dataArray); 

不幸的是没有工作。如果我取消注释:

$scope.dataArray = [{value : "just a test value"}]; 

我可以选择加载页面,并选择视图后,该条目则显示dataArray中的第一项,并事后我可以访问整个列表,并从中选择项目。

所以我想知道我能做些什么来在数据可用后更新选择视图。通过添加一个监听器或手动调用select视图来更新(),refesh()等等。有没有这样的功能?

+0

工程细https://plnkr.co/edit/mLZRxl4fektVAGnLGaAJ?p =预览)。 – georgeawg

回答

1

您可以通过一些boolean标志,这台true,当加载 数据show您选择的元素。

你可以做下面的代码。

在控制器:

$scope.dataArray = []; 
$scope.myData= null; 
$scope.isDataLoaded = false; //flag for data loading. 

function getArray() { 
    DataFactory.getArray().then(function (data) { 
    $scope.isDataLoaded = true; // make true now 
    $scope.dataArray = data.data; //your result might be data.data 
    $scope.myData = $scope.dataArray[0]; // you may select 1st as default 
    }); 
}  
getArray(); 

在HTML:

<select ng-if="isDataLoaded" ng-model="myData" ng-class="select-chosen" 
     ng-options="myData as myData.value for myData in dataArray"> 
</select> 
在[这个DEMO上PLNKR](
+0

谢谢,它没有解释为什么它不起作用。但它是一个有用的解决方法。 – mgerbracht

+0

原因可能是浏览器没有完成渲染,直到它在控制器中分配的时间,另一个替代方案可能会将'get'调用包装在'$ timeout'中。 – anoop