Chrome瀏覽器：在用戶打開選項後添加選項

我從休息服務中檢索一些數據並使用它來填充AngularJS中的選項。Chrome瀏覽器：在用戶打開選項後添加選項

如果用戶在檢索數據後打開選擇，則沒有問題。

如果用戶在檢索數據之前打開select，並保持打開狀態直到選項被填充，那麼chrome不會調整選項列表的大小，並且只顯示一個高度爲一行的滾動條。這對用戶來說是不合適和誤導的。

有什麼方法可以在Chrome中解決這個問題嗎？我意識到，我可以保持選擇禁用或隱藏，直到我填充選項，但我想知道是否有其他的選擇。

HTML（按鈕模擬調用REST服務）：

<div ng-controller="MyCtrl"> 
    <button type="button" ng-click="clickButton()">Add options 
    </button> 
    <select ng-model="value" style="width: 200px;" 
    ng-options="o.id as o.label for o in list" 
    ><option value=""></option></select> 
    {{value}} 
</div>

的Javascript：

function MyCtrl($scope, $timeout) { 
    $scope.list = []; 
    function addToList() { 
     $scope.list = [{ 
      "id" : 1, 
      "label" : "One" 
      }, { 
      "id" : 2, 
      "label" : "Two" 
      }, { 
      "id" : 3, 
      "label" : "Three" 
      } 
     ]; 
    } 
    $scope.clickButton = function() { 
     $timeout(function() { 
     addToList(); 
     }, 5000); 
    }; 
}

在的jsfiddle：http://jsfiddle.net/PabloMG/u3fz9be0/

來源

2016-04-14 Pablo

我覺得你最好的選擇將是一個條件添加到您的選擇輸入： <選擇納克-if =「list.length」... – Rob

創建小提琴：https：//jsfiddle.net/y7g3y9st/超時僅用於概念驗證。 – Rob

我以前也碰到過類似的情況我們模糊了選擇框，等待選項被追加，然後再次將焦點放在選擇框上。如果你已經看到它關閉了，它有點奇怪，但它比坐在那裏沒有數據的開放選擇框要好。

當你強迫5秒鐘等待時，你的特殊代碼將會非常奇怪。

這將顯示基本功能。

$scope.clickButton = function() { 
    $timeout(function() { 
    addToList(); 
    document.querySelector('select').blur(); 
    document.querySelector('select').focus(); 
    }, 5000);

在我們的實現，我們檢查，看看是否特定的選擇框有焦點之前，我們模糊了它，只給它再次集中，如果當我們最初模糊它這個箱子被聚焦。

來源

2016-04-14 15:28:32 Jeff

演示：http://jsfiddle.net/u3fz9be0/4/ - 這個問題也是相關的：http://stackoverflow.com/questions/19652085/open-dropdown-list-from-javascript-function – Aust

哦，很好...你甚至再次打開它。 – Jeff

另一種方法是在選擇輸入上使用ng-disabled指令，如本例中的第二個選擇： https：// jsfiddle。淨/ y7g3y9st/ 我寧願這在控制器中混合文檔選擇器。 – Rob

我總是使用ng-if的粉絲，因爲您可以在添加數據之前添加加載消息。這對於發生的事情更爲明確，而不是禁用的輸入。

請注意，此處的超時值正在用於概念驗證。您可能想要從您的控制器中的$ http回調加載您的列表。

更新：增加使用NG-禁用

小提琴第二選擇輸入：https://jsfiddle.net/y7g3y9st/

function ListCtrl($timeout) { 
    var vm = this; 
    vm.list = []; 

    loadList(); 

    function loadList() { 
    $timeout(function() { 
     vm.list = [{ 
     "id": 1, 
     "label": "One" 
     }, { 
     "id": 2, 
     "label": "Two" 
     }, { 
     "id": 3, 
     "label": "Three" 
     }] 
    }, 2000); 
    } 
} 

<div ng-if="!ctrl.list.length"> 
Loading list... 
</div> 
<select ng-model="value" style="width: 200px;" ng-options="o.id as o.label for o in ctrl.list" ng-if="ctrl.list.length"> 
<option value=""></option> 
</select> 

<!-- ng-disabled --> 
<select ng-model="value" style="width: 200px;" ng-options="o.id as o.label for o in ctrl.list" ng-disabled="!ctrl.list.length"> 
    <option value=""></option> 
</select>

來源

2016-04-14 15:38:06 Rob

Chrome瀏覽器：在用戶打開選項後添加選項

回答

相關問題