繁体   English   中英

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

[英]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。 它最初是未定义的,但是一旦选择了下拉列表,该值将是未定义的值,我在控制台中验证,我得到一些价值。

下拉代码就在这里

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

正如您所提到的, $scope.abc在某些时候是未定义的,并且可能在此期间被访问。 看起来你正在通过jQuery设置$scope.abc ,你应该通过AngularJS中的ng-model来完成它。

首先,只需为您的变量定义一个存根:

$scope.abc = "";

然后在你的HTML中:

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

这会将输入元素(也适用于选择)绑定到后端变量。 当用户进行选择时,它将在您的代码中神奇地更新,如果您更新代码中的变量,它也将在视图中更新!

你可以在这里阅读更多关于ng-model信息: http//docs.angularjs.org/api/ng.directivengModel

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

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

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

如果它是一个静态字符串值,请注意单个滴答,如果它是动态的,则不勾选。

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM