如何将所选项目从角度 UI 下拉列表发送回角度控制器

How to send the selected item from the angular-ui dropdown back to the angular controller

本文关键字：下拉列表 控制器 UI 选项 项目      更新时间：2023-09-26

使用 angular-ui，请考虑以下几点：

<div class="btn-group" dropdown is-open="status.isopen">
  <button type="button" class="btn btn-default btn-labeled dropdown-toggle fa fa-location-arrow" dropdown-toggle ng-disabled="disabled">
    Location: {{ loc }} <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li ng-repeat="choice in locations">
      <a>{{choice}}</a>
   </li>
  </ul>
</div>

该应用程序：

var app = angular.module('Demo', ['ui.router', 'ui.bootstrap']);
app.controller('CrmCtrl', ['$scope', function ($scope) {
$scope.location = "Sutton Coldfield";
$scope.locations = [
    "Sutton Coldfield",
    "Coventry",
    "Redditch",
    "London",
    "Manchester",
    "Sheffield",
    "Dublin"
];
}]);

目的是在用户选择新位置时更改选择位置。 即下拉列表以"位置：萨顿科尔菲尔德"开头，并应更新为"位置：考文垂"。例如，我可能还想在侧边栏中使用该值。

示例和 Plunk：http://plnkr.co/edit/5giYygkYcVDJ6RvCKRMv?p=preview

为了实现这一点，我可以更新$scope.loc但我无法弄清楚如何"连接"或"推送"所选选项回控制器。

我也在寻找一种最佳实践方法，因为我这样做主要是为了我自己的个人学习。

我已经看到一些关于在A元素上使用ng-model的讨论，但它没有被接受。

您需要手动处理它，如果您想将其用作选择，它只是一个下拉菜单。您只需在下拉列表中的重复项上设置ng单击即可。

<a ng-click="setChoice(choice)">{{choice}}</a>

在控制器中：

$scope.setChoice = function(data){
  $scope.loc = data;
 //Do somethign else..
}

普罗提

相关文章：