使用 AngularJS 观察下拉菜单的所选项目不起作用

跟进自AngularJS：为什么我的手表不工作 https://stackoverflow.com/questions/16486634/why-my-angularjs-watch-is-not-working

function myController($scope, $http) {

    $scope.abc = abcValueFromOutsideOfMyController;    

    $scope.getAbcCnt= function()
    {
        url2 = baseURL + '/count/' + $scope.abc;

        $http.get(url2).success(function (data) {
            $scope.abcCnt = data.trim();
        });
    };

    $scope.$watch('abc',getAbcCnt);
}

为什么我在 $scope.abc 上收到未定义的错误。

abcValueFromOutsideOfMyController 通过下拉列表选择元素来设置。它最初是未定义的，但一旦选择下拉菜单，该值将不是未定义的，我在控制台中验证，我得到了一些值。

下拉代码在这里

$(document).on('click', '.dropdown-menu li a', function () {

    selectedItem = $(this).text();
    $("#selectedItem").text(selectedItem);
    abcValueFromOutsideOfMyController= selectedItem.trim();
    console.log(abcValueFromOutsideOfMyController);
});

这是我的html

<div class="dropdown btn">

    <div id="collectiondropDown" class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown"
         data-target="#" >
        &nbsp;<span id="selectedItem" ng-model="abc">Items</span>
        <b class="caret"></b>
    </div>

    <ul id="dropDownUL" class="dropdown-menu pull-left" role="menu" aria-labelledby="dLabel">
    </ul>
</div>

我是 AngularJS 的新手，如果我缺少一些基本概念并且上述概念无法做到，请告诉我。

$scope.abc正如您所提到的，它在某些时候是未定义的，并且可能在此期间被访问。看起来你正在设置$scope.abc通过 jQuery，你应该通过ng-model在 AngularJS 中。

首先，只需为变量定义一个存根：

$scope.abc = "";

然后在你的 HTML 中：

<input ... ng-model="abc" ... />

这会将输入元素（也适用于选择）绑定到后端变量。当用户做出选择时，它会神奇地在您的代码中更新，如果您更新代码中的变量，它也会在视图中更新！

您可以阅读更多有关ng-model here: http://docs.angularjs.org/api/ng.directive:ngModel http://docs.angularjs.org/api/ng.directive:ngModel

UPDATE

这是与 Twitter Bootstrap 的下拉菜单配合使用的另一个选项。它可能不是最“最好”的解决方案，但它是第一个想到的解决方案。

在您的元素中，您可以添加ng-click http://docs.angularjs.org/api/ng.directive%3angClick指令并调用控制器中的函数。然后，该控制器设置一个用作按钮标题的变量。在这种情况下你不使用ng-model，您只需将变量包含在{{ }}容器。

你的 HTML 看起来像这样：

<div class="dropdown btn">
  <div id="collectiondropDown" class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" >
    <span>{{ selectedItem }}</span>
    <b class="caret"></b>
  </div>

  <ul id="dropDownUL" class="dropdown-menu pull-left" role="menu" aria-labelledby="dLabel">
    <li ng-click="OnItemClick('Option 1')">Option 1</li>
    <li ng-click="OnItemClick('Option 2')">Option 2</li>
    <li ng-click="OnItemClick('Option 3')">Option 3</li>
  </ul>
</div>

...以及你的 JavaScript：

function DropdownCtrl($scope) {

  $scope.selectedItem = "Items";

  $scope.OnItemClick = function(event) {
    $scope.selectedItem = event;
  }
}

我已经创建了一个 Plunker 示例。你可以在这里找到它：http://plnkr.co/edit/JrKJKxfG6aYiLHfR4pGE?p=preview http://plnkr.co/edit/JrKJKxfG6aYiLHfR4pGE?p=preview