如何在Angular中选定的下拉列表中获取按钮值中的特定ID?

时间:2017-02-11 04:55:40

标签: angularjs

我正在处理一个表单,我想向特定用户发送电子邮件 表格提交后。我可以获得一个下拉列表 员工姓名。我将从列表中选择任何名称。特选 名称,他的电子邮件ID或ID应该进入电子邮件按钮的值,这样 点击电子邮件,我会直接在电子邮件按钮上获取他的电子邮件ID。

我是Angular的新手。请帮忙。

<select ng-model="empInfo1" ng-options="emp.candidate_name for emp in names4" class="span2"></select>

<button type="button" class="btn btn-primary" ng-click="email()">Email</button>

3 个答案:

答案 0 :(得分:1)

您可以使用ng-model并在ng-click上传递模型,要使用按钮值获取所选电子邮件,请使用角度表达式

{{selected.email}}

<强>样本

&#13;
&#13;
var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope",
  function($scope) {
    $scope.names4 = [{
      "candidate_name": "Thomas",
      "email": "tford0@noaa.gov",
      "id": "a35398ac-a974-47f6-9beb-ff9d5a6a8282"
    }, {
      "candidate_name": "Julie",
      "email": "jhansen1@pen.io",
      "id": "499e919a-e247-4665-9468-cc56a444848e"
    }, {
      "candidate_name": "Albert",
      "email": "amason2@g.co",
      "id": "76f53028-ec26-4b52-b12e-42ba3983ec36"
    }];
    $scope.email = function(selected) {
      alert(selected.email)
    }

  }
]);
&#13;
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
  <title>To Do List</title>
  <link href="skeleton.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
  <script src="MainViewController.js"></script>
</head>
<body ng-controller="dobController">
  <div class="col-md-20">
    <div id="main">
      <form class="form-horizontal" role="form">
        <label class="control-label col-md-2">Filter List:</label>
        <div class="col-md-5">
          <select ng-model="selected" ng-options="emp.candidate_name for emp in names4 ">
          </select>
        </div>
        <button type="button" class="btn btn-primary" ng-click="email(selected)">{{selected.email}}</button>
      </form>
    </div>
  </div>
</body>

</html>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

如果names4是包含emp名称的数组,并且电子邮件对象是这样的:

[{candidate_name : 'xyz' , candidate_email : 'xyz@mail.com'},{...},{....}]

然后在

<select ng-model="empInfo1" ng-options="emp.candidate_name for emp in names4" class="span2"></select>

{{empInfo1.candidate_email}}将返回候选人电子邮件:

<button type="button" class="btn btn-primary" ng-click="email({{empInfo1.candidate_email}})">Email</button>

答案 2 :(得分:-1)

您可以将员工详细信息保存在名称4中,如下面的json:

names = [{name:'A', empId: '100', email:'abc@gmail.com'}, {name:'b', empId: '101', email:'abc1@gmail.com'}];

<select ng-model="empInfo1" class="span2">
 <options ng-repeat="emp in names4" value="{{emp}}">{{names4.name}} </options>
</select>

在控制器中,您可以使用员工ID和电子邮件直接获取ng-model值。

scope.email = function(){
  console.log(empInfo1)
}

希望这有帮助!