更新选项后无法立即选择选项

时间:2013-06-03 15:00:08

标签: angularjs option html-select

我想动态管理select标签下的选项数量,并在更新选项后自动选择最后添加的选项。
这是我试过的:

<!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="angular.js@1.0.x" 
            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>

添加选项时,选择切换为不存在的值。在选项更新之前,似乎已解决了选择值更新。

有没有人知道如何解决这个问题?

1 个答案:

答案 0 :(得分:1)

您声明:我想动态管理选择标记下的选项数量,并在更新选项后自动选择上次添加的选项。

您可以通过更改HTML来完成此操作(在评论后编辑):

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

有关ng-selected directive

的更多信息

随附的js中的第19行也应删除 - 此行目前如下所示:

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