使用AngularJS手表拿到下拉的所选项目不工作 [英] Using AngularJS watch to get drop-down's selected item not working

问题描述

为什么我的angularJS看不工作

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是通过一个下拉选择元件向下设置。它最初将不确定，但只要下拉列表中选择，该值会比其他不确定的东西，我在控制台验证，我得到一些价值。

abcValueFromOutsideOfMyController is set by selecting element through a drop down. It will be undefined initially but as soon as dropdown is selected, the value will be something other than undefined, I verified in console, I get some value.

下拉code是这里

$(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，让我知道，如果有我缺少一些基本的概念，上面是不可能的事情。

I am new to AngularJS, let me know if there is some fundamental concept I am missing and above is not possible to do.

推荐答案

$ scope.abc ，你提到，在某些时候不定，期间很可能被访问这次。它看起来像你的设置 $ scope.abc 通过jQuery，您应该通过做它 NG-模型在AngularJS。

$scope.abc, as you mention, is undefined at some point and is probably being accessed during this time. It looks like you're setting $scope.abc via jQuery, you should be doing it via the ng-model within AngularJS.

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

First, just define a stub for your variable:

$scope.abc = "";

然后在你的HTML：

Then in your HTML:

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

这将绑定输入元素（在选择工作太）到后端变量。当用户进行选择，它会在你code神奇更新，如果你在你的code更新变量，将在视图中过于更新！

This will bind the input element (works on selections too) to the backend variable. As the user makes selections it will magically update in your code, and if you update the variable in your code it will update in the view too!

您可以阅读更多关于 NG-模型此处的 http://docs.angularjs.org/api/ng.directive:ngModel

You can read more about ng-model here: http://docs.angularjs.org/api/ng.directive:ngModel

更新

下面是与Twitter的引导的下拉作品的另一种选择。它可能不是最最好的解决方案，但它是浮现在脑海的第一个。

Here is another option that works with Twitter Bootstrap's Dropdown. It might not be the most "best" solution, but it is the first one that came to mind.

在你的元素，你可以添加一个 NG-点击 指令，并调用一个函数在控制器中。该控制器随后设置用于作为标题为按钮的变量。在这种情况下，您不使用 NG-模型，你只是包含在 {{}} 容器中的变量

In your elements, you can add an ng-click directive and call a function in your controller. That controller then sets a variable that is used as the title for the button. In that case you don't use ng-model, you just include the variable in a {{ }} container.

您的HTML看起来是这样的：

Your HTML would look something like:

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

... and your JavaScript:

function DropdownCtrl($scope) {

  $scope.selectedItem = "Items";

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

我创建了示例的Plunker。你可以在这里找到它：
http://plnkr.co/edit/JrKJKxfG6aYiLHfR4pGE?p=$p$pview

这篇关于使用AngularJS手表拿到下拉的所选项目不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！