如何在按钮中显示下拉列表的选定元素？

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