如何在按鈕中顯示下拉列表的選定元素？

Question

我有這個下拉菜單：

  <div class="input-group">

  <div class="input-group-btn">

    <button type="button" class="btn btn-default dropdown-toggle"
    data-toggle="dropdown" aria-haspopup="true"
    aria-expanded="false">

    All Categories

    <span class="caret"></span></button>

    <ul class="dropdown-menu" ng-model = "cat">

      <li><a href="#">All Categories</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Clothes</a></li>
      <li><a href="#">Electronics</a></li>
      <li><a href="#">Books</a></li>
      <li><a href="#">Other</a></li>
    </ul>
  </div>

如何顯示從列表中選擇的元素，而不是按鈕的標簽“所有類別”。 或者，我是否可以刪除標簽，而僅將默認選擇的項目設置為第一個，即“所有類別”？

另外，還有一個問題，如何使用angular訪問JS文件中的選定值？

$scope.cat.value 

似乎不起作用。

Answer 1

在angularjs代碼中聲明一個$ scope.selected變量。修改您的list-item標簽（選項），從angularjs添加ng-click以設置所選變量的值。 例如：

<li ng-click="selected = 'option1'"><a>Option1</a></li>

如果單擊它，則所選變量將被分配值“ option1”。

另一種選擇是從ng-click內部的角度代碼中調用函數：

ng-click="selectItem('option1')"

然后用角度代碼：

$scope.selectItem = function(value) { $scope.selected = value; }

如果要獲取角度范圍變量的值，請執行$ scope.variable。 在這種情況下，它將是$ scope.selected