使用AngularJS watch獲取下拉列表中選定的項目不起作用

Question

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

UPDATE

這是另一個與Twitter Bootstrap的Dropdown一起使用的選項。 它可能不是最“最好”的解決方案，但它是第一個浮現在腦海中的解決方案。

在元素中，您可以添加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 個解決方案

解決方案1
4 已采納 2013-05-10 16:53:33

解決方案2
4 2014-11-12 16:56:42

解決方案3
0 2015-07-01 16:06:19

使用AngularJS watch獲取下拉列表中選定的項目不起作用

問題描述

3 個解決方案

解決方案1 4 已采納 2013-05-10 16:53:33

解決方案2 4 2014-11-12 16:56:42

解決方案3 0 2015-07-01 16:06:19

解決方案1
4 已采納 2013-05-10 16:53:33

解決方案2
4 2014-11-12 16:56:42

解決方案3
0 2015-07-01 16:06:19