更新選項後無法立即選擇選項

我想動態管理選擇標籤下的選項數量，並在更新選項後自動選擇最後添加的選項。
這裏是我的嘗試：更新選項後無法立即選擇選項

<!DOCTYPE html> 
<html ng-app="plunker"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script> 
     document.write('<base href="' + document.location + '" />'); 
    </script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" 
      src="http://code.angularjs.org/1.0.7/angular.min.js" 
      data-semver="1.0.7"></script> 
    <script src="app.js"></script> 
    </head> 

    <body ng-controller="MainCtrl"> 
    <select ng-model="selectedOption"> 
     <option value="">-----Select an option-----</option> 
     <option ng-repeat="option in options" value="{{option.value}}"> 
     {{option.name}} 
     </option> 
    </select> 
    <button ng-click="addOption()">Add option</button> 
    </body> 

</html>

當你增加一個選項，選擇切換到不存在的價值。在選項更新之前，似乎選擇值更新已解決。

有沒有人有任何想法，我怎麼能解決這個問題？

來源

2013-06-03 Grouflon

您能否提供一個Plunker（http://plnkr.co）或我們可以查看的工作演示？ –

有趣！ OP有一個plnkr腳本：http://plnkr.co/edit/VhltCOZOYOtFW0WewKfQ?p=preview，它似乎在編輯中被刪除。 –

您聲明：我想動態管理選擇標記下的選項數量，並在更新選項後自動選擇最後添加的選項。

你可以通過改變你的HTML像這樣做（評論後可進行編輯）：

<option ng-repeat="option in options" value="{{option.value}}" ng-selected="option.value==options.length-1"> {{option.name}}</option>

在ng-selected directive

線19在隨行的js也應該被刪除的更多信息 - 這條線目前如下所示：

$scope.selectedOption = $scope.options.length - 1;

來源

2013-06-03 15:19:04

看來「ng-selected」期待布爾值而不是索引。但除此之外，這正是我所期待的，非常感謝！ – Grouflon

你說得對 - 我已經解決了答案。 –

更新選項後無法立即選擇選項

回答

相關問題