使用 AngularJS 手表获取下拉列表的选定项不起作用答案

【问题标题】：Using AngularJS watch to get drop-down's selected item not working使用 AngularJS 手表获取下拉列表的选定项不起作用
【发布时间】：2013-05-10 16:46:09
【问题描述】：

从AngularJS : Why my 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 的新手，如果有一些我遗漏的基本概念，请告诉我，以上是不可能的。

【问题讨论】：

标签： javascript twitter-bootstrap angularjs

【解决方案1】：

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

首先，为你的变量定义一个存根：

$scope.abc = "";

然后在你的 HTML 中：

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

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

您可以在此处阅读有关ng-model 的更多信息：http://docs.angularjs.org/api/ng.directive:ngModel

更新

这是另一个适用于 Twitter Bootstrap 下拉菜单的选项。它可能不是最“最佳”的解决方案，但它是我想到的第一个解决方案。

在您的元素中，您可以添加一个ng-click 指令并在您的控制器中调用一个函数。然后该控制器设置一个变量，用作按钮的标题。在这种情况下，您不使用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

【讨论】：

+1。感谢您的信息。我刚刚添加了有问题的 html 下拉代码，我还尝试按照您的建议在几个地方添加 ng-model，但我仍然得到 $scope.abc 未定义。仅供参考，我使用了 twitter bootstrap 的下拉菜单
谢谢先生！现在就试试这个。

【解决方案2】：

我找到了更好的解决方案这是迄今为止最简单、代码最少的解决方案

 <ul id="dropDownUL" class="dropdown-menu pull-left" role="menu" aria-labelledby="dLabel">
   <li ng-click="abc = 'value1'">Value1</li>
   <li ng-click="abc = 'value2'">Value2</li>
 </ul>

如果你动态加载它们还有另一种方法

  <ul id="dropDownUL" class="dropdown-menu pull-left" role="menu" aria-labelledby="dLabel">
   <li ng-repeat="value in values" ng-click="abc = value">{{value}}</li>
  </ul>

如果它是静态字符串值，请注意单个滴答声，如果它是动态的，则不要滴答声。

【讨论】：

【解决方案3】：

我可以从下拉列表中获取所选项目，如下所示：

<body ng-app="app" ng-controller="ctrl">
<p>Id:{{id}}</p>
<select ng-model="id" ng-options="val.id as val.name for val in options">
</select>
<script>
angular.module("app",[])
  .controller("ctrl",['$scope',function($scope){
    $scope.options = [
      {id:1, name:'First'},
      {id:2, name:'Second'}
    ]
    $scope.$watch('id');
  }])
 </script>
</body>

【讨论】：