如何将 angular-ui 下拉列表中的所选项目发送回 angular 控制器
How to send the selected item from the angular-ui dropdown back to the angular controller
使用 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"
];
}]);
目的是让选择位置随着用户选择新位置而改变。例如,下拉列表开始时类似于 'Location: Sutton Coldfield',并且应该更新为 'Location: Coventry'。例如,我可能还想使用边栏中的值。
示例和 Plunk:http://plnkr.co/edit/5giYygkYcVDJ6RvCKRMv?p=preview
为了实现这一点,我可以更新 $scope.loc
,但我不知道如何 'wire up' 或 'push' 将选定的选项返回给控制器。
我也在寻找这样做的最佳实践方法,因为我这样做主要是为了我自己的个人学习。
我看过 some discussion 关于在 A
元素上使用 ng-model 的内容,但没有被采纳。
您需要手动处理它,如果您想将其用作 select,它只是一个下拉菜单。您可以只对下拉列表的重复项设置 ng-click。
<a ng-click="setChoice(choice)">{{choice}}</a>
并在您的控制器中:
$scope.setChoice = function(data){
$scope.loc = data;
//Do somethign else..
}
使用 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"
];
}]);
目的是让选择位置随着用户选择新位置而改变。例如,下拉列表开始时类似于 'Location: Sutton Coldfield',并且应该更新为 'Location: Coventry'。例如,我可能还想使用边栏中的值。
示例和 Plunk:http://plnkr.co/edit/5giYygkYcVDJ6RvCKRMv?p=preview
为了实现这一点,我可以更新 $scope.loc
,但我不知道如何 'wire up' 或 'push' 将选定的选项返回给控制器。
我也在寻找这样做的最佳实践方法,因为我这样做主要是为了我自己的个人学习。
我看过 some discussion 关于在 A
元素上使用 ng-model 的内容,但没有被采纳。
您需要手动处理它,如果您想将其用作 select,它只是一个下拉菜单。您可以只对下拉列表的重复项设置 ng-click。
<a ng-click="setChoice(choice)">{{choice}}</a>
并在您的控制器中:
$scope.setChoice = function(data){
$scope.loc = data;
//Do somethign else..
}