2

从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 的新手，让我知道是否有一些我遗漏的基本概念，以上是不可能的。

4

3 回答 3

4

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

首先，只需为您的变量定义一个存根：

$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

于 2013-05-10T16:53:33.730 回答
4

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

 <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-12T16:56:42.467 回答
0

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

<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-01T16:06:19.660 回答