使用AngularJS看得到下拉的所選項目不工作

跟進從AngularJS : Why my watch is 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通過下拉菜單選擇元素進行設置。它最初是未定義的，但一旦選擇了下拉菜單，該值將是非定義的，我在控制檯中驗證，我得到了一些值。

降下來代碼是在這裏

$(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，讓我知道如果我錯過了一些基本的概念，上面是不可能的去做。

來源

2013-05-10 Watt

$scope.abc，正如您所提到的，在某些時候未定義，可能在此期間被訪問。它看起來像通過jQuery設置$scope.abc，你應該通過AngularJS中的ng-model來完成。

首先，只定義一個存根爲你的變量：

$scope.abc = "";

在你的HTML

然後：

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

這將input元素結合（在選擇工作太）到後端變量。當用戶進行選擇時，它會在代碼中奇蹟般地更新，如果更新代碼中的變量，它也會在視圖中更新！

你可以閱讀更多關於ng-model這裏：http://docs.angularjs.org/api/ng.directive:ngModel

UPDATE

下面是與Twitter的引導的下拉作品的另一種選擇。它可能不是最「最好」的解決方案，但它是第一個想到的。

在你的元素中，你可以添加一個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

來源

2013-05-10 16:53:33

+1。感謝您的信息。我剛剛添加了我的html下拉代碼，我也嘗試在幾個地方添加ng模型，如你推薦的，我仍然得到$ scope.abc undefined。僅供參考，我用twitter bootstrap的dropddown – Watt 2013-05-10 17:02:05

我已經更新了我的答案。 – 2013-05-10 17:48:57

謝謝先生！現在就試試這個。 – Watt 2013-05-10 19:40:51

我已經找到了更好的解決方案這是迄今爲止最簡單和最代碼解決方案

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

注意，如果它的一個靜態字符串值，單個滴答聲，如果它的動態沒有滴答。

來源

2014-11-12 16:56:42

我能夠從下拉列表中獲得所選擇的項目如下圖所示：

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

來源

2015-07-01 16:06:19

使用AngularJS看得到下拉的所選項目不工作

回答

相關問題