Question

从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的新手，请告诉我是否有一些我缺失的基本概念，以上是不可能的。

Answer 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的Dropdown的选项。它可能不是最好的＆＃34;最好的＆＃34;解决方案，但它是第一个想到的。

在元素中，您可以添加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

Answer 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>

如果它是一个静态字符串值，请注意单个滴答，如果是动态字符串则没有滴答。

Answer 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>

使用AngularJS watch获取下拉列表中选定的项目不起作用

3 个答案: