如何将选定的项目从angular-ui下拉列表发送回角度控制器

Using angular-ui, consider the following:

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

The app:

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"
];
}]);

The aim is to get the selection location to change as the user selects a new location. i.e. the dropdown starts like 'Location: Sutton Coldfield' and should update to 'Location: Coventry' for instance. I might also want to use the value in a sidebar for example.

目的是在用户选择新位置时使选择位置改变。即下拉开始像'位置:萨顿科尔菲尔德',并应更新为'位置:考文垂'。我可能还想使用侧边栏中的值。

Example and Plunk: http://plnkr.co/edit/5giYygkYcVDJ6RvCKRMv?p=preview

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

To achieve this I can update $scope.loc but what I can't figure out is how to 'wire up' or 'push' the selected choice back to the controller.

为了达到这个目的,我可以更新$ scope.loc,但我无法弄清楚的是如何将所选择的选项“连线”或“推”回控制器。

I'm also looking for a best practice way of doing this as I am doing this primarily for my own personal learning.

我也在寻找一种最好的练习方式,因为我这样做主要是为了我个人的学习。

I've seen some discussion about using ng-model on the A element, but it wasn't taken up.

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

1 个解决方案

#1

You would need to handle it manually, it is just a dropdown menu if you want to use it as a select. You could just set an ng-click on the repeated items of the dropdown.

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

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

and in your controller:

在你的控制器中:

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

Plnkr

#1