Angular 带有按钮的下拉菜单未获取数据

Question

我是 angular 的新手，被选中 linking 下拉菜单选择为 ng-click 按钮

<div class="col-xs-2">
    <select name="cars" ng-model="dropdown_data">
      <option>email</option>
      <option>phone</option>
      <option>username</option>
    </select>
  </div>
  <br />
  <div class="col-xs-4">
    <button type="button" class=" " data-ng-click="search_{{dropdown_data}}()">Search</button>
  </div>

  <script>
    var ng = angular.module('myApp', []);
    ng.controller('ctrl', function($scope, $http) {
      $scope.search_phone = function() {
        alert("phone")
      }
      $scope.search_email = function() {
        alert("email")
      }
    }) 
  </script>

这似乎相当简单，但我不确定我做错了什么...我无法根据所选下拉列表显示警报

笨蛋 link http://plnkr.co/edit/Iicm9tvfizXxNl3MwtZI?p=preview

非常感谢任何帮助...提前致谢

Answer 1

问题是这个data-ng-click="search_{{dropdown_data}}()"。最好像这样将值传递给函数：

<button type="button" data-ng-click="search(dropdown_data)">Search</button>

$scope.search = function(type) {
    alert(type)
}

也不要忘记 ng-app 和 ng-controller。

见the plunker

Answer 2

plunkr 中几乎没有您需要的东西。

首先，您需要在 HTML 上定义它实际上是一个 Angular 应用程序（通过 ngApp 属性）。其次，您需要为您的视图定义一个控制器（通过 ngController 属性）。

准备好这些东西后，您需要了解这会做什么

ng-click="search_{{dropdown_data}}()"

如果您考虑 ng-click 的工作原理，它会在单击时注册一个函数。这发生在指令的 compile 阶段 (as you can see on its sourcecode)。

这意味着当指令编译时，它将注册名称为 search_{{dropdown_data}} 的函数，即使 dropdown_data 稍后在其值更改时进行插值，但最初绑定的函数仍然有效'更新。

但是，如果您将 dropdown_data 作为属性或函数映射的键，则可以使用。这里有一个你可以如何做到这一点的例子：

$scope.search = {
    phone: function() {
    alert("phone")
  },
  email: function() {
    alert("email")
  }
  };

在按钮上：data-ng-click="search[dropdown_data]()"

这里是一个工作 plunkr：http://plnkr.co/edit/u4vJj2a0r1a95w64crHM?p=preview

Answer 3

我也是 angular 的新手，但使用了相同的功能，但没有直接给定锚点的搜索按钮 link 如果需要，请尝试此操作，

 <div ng-app="myApp">
  <div ng-controller="setContent">
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Subject
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li ng-repeat="a in subjects"><a href="#">{{a}}</a></li>
        </ul>
    </div>

var app = angular.module('myApp', []);    
app.controller('setContent', function($scope, $http) {
  $scope.subjects = ['Math', 'Physics', 'Chemistry', 'Hindi', 'English'];
  });
});

Angular 带有按钮的下拉菜单未获取数据

Angular dropdown with a button not getting data

javascript

click

angularjs