如何以编程方式选择ng

如何以编程方式选择ng-option值？(How to programmatically select ng-option value?)

我有一个视图，其中包含用于过滤报表的下拉列表。 我还有一个显示为链接的已保存过滤器的视图。 当用户点击他们保存的过滤器时，我希望选择下拉列表的相应值。 下降正在适当填充。 在保存的过滤器链接上有一个ng-click ，它将调用一个函数，该函数遍历已保存过滤器值的集合并自动选择正确的过滤器值。 我无法弄清楚如何以编程方式设置所选的选项。 任何帮助深表感谢！

<select uid="locSelect" class="span12" ng-model="reportDetail.selectedLoc" ng-options="loc.dbid as loc.serviceName for loc in reportDetail.locList | orderBy:'name'"> <option uid="unselectedLocOption" value="">-- Select One --</option> </select>

以下是已保存过滤器的列表：

<div class=" well fixed-search" style="overflow-x: hidden;overflow-y: auto;"> <div class="well-header"> Saved Filters </div> <div ng-if="!hasSavedFilters"> <span>No saved filters</span> </div> <ul ng-if="hasSavedFilters" class="nav nav-list dashboard-list"> <li ng-repeat="filter in reportDetail.savedFilters"> <a uid="savedFilter" href="" ng-click="reportDetail.loadSavedFilters(filter.filters)"> <span ng-bind="filter.title"></span> </a> </li> </ul>

这是我的控制器

(function(){ 'use strict'; var ReportDetailController = function(ReportsService, $scope){ var _locList = {}; var _hospitalStatusList = {}; var _providerStatusList = {}; var _savedFilters = []; var _sourceTypeList = {}; var _dateRangeList = {}; var _init = function(){ ReportsService.getCurrentReportSavedFilters().then(function(data){ $scope.reportDetail.savedFilters =data; $scope.hasSavedFilters = ReportsService.hasSavedFilters(); }); ReportsService.getLOCListForDDL().then(function(data){ $scope.reportDetail.locList = data; //$scope.reportDetail.selectedLoc = $scope.reportDetail.locList[0]; }); ReportsService.getSelectListData() .then(function(data){ $scope.reportDetail.sourceTypeList = data.CONNECTION_TARGET_STATUS; $scope.reportDetail.hospitalStatusList = data.CONNECTION_SOURCE_STATUS; }); ReportsService.getDateRangesForDDL() .then(function(data){ $scope.reportDetail.dateRangeList = data; }); $scope.reportDetail.providerStatusList = ReportsService.getProviderStatusForDDL(); }; var _loadSavedFilters = function(filters){ for(var i = 0, l = $scope.reportDetail.locList.length; i<l; i++){ if($scope.reportDetail.locList[i].serviceName == filters.levelOfCare){ $scope.reportDetail.selectedLoc = $scope.reportDetail.locList[i]; console.log($scope.reportDetail.selectedLoc); } } } var _isActive = function(filter){ for(var i = 0, l = $scope.reportDetail.savedFilters.length; i<l; i++){ if(filter.title == $scope.reportDetail.savedFilters[i].title){ return true; } return false; } } var _generateReport = function(){ return ReportsService.generateReport(); }; $scope.reportDetail = { init: _init, selectedLoc: null, isActive: _isActive, locList: _locList, selectedHospitalStatus: 'NOTIFIED', hospitalStatusList: _hospitalStatusList, selectedProviderStatus: 'NEW', providerStatusList: _providerStatusList, selectedSourceType: 'CONNECTED', sourceTypeList: _sourceTypeList, selectedDateRange: '', dateRangeList: _dateRangeList, savedFilters: _savedFilters, loadSavedFilters: _loadSavedFilters, generateReport: _generateReport }; $scope.reportDetail.init(); }; app.controller('ReportDetailController', ['ReportsService', '$scope', ReportDetailController]); })();

I have a view that is filled with dropdownlists to filter a report. I also have a view of saved filters that are displayed as links. When a user clicks on their saved filters, I want the appropriate values of the dropdownlists to be selected. The drop downs are being populated properly. On the saved filter link there is an ng-click that will call a function that iterates through the collection of saved filter values and automatically selects the correct one. I cannot figure out how to programmatically set the selected option. Any help is much appreciated!

<select uid="locSelect" class="span12" ng-model="reportDetail.selectedLoc" ng-options="loc.dbid as loc.serviceName for loc in reportDetail.locList | orderBy:'name'"> <option uid="unselectedLocOption" value="">-- Select One --</option> </select>

Here is the list of saved filters:

<div class=" well fixed-search" style="overflow-x: hidden;overflow-y: auto;"> <div class="well-header"> Saved Filters </div> <div ng-if="!hasSavedFilters"> <span>No saved filters</span> </div> <ul ng-if="hasSavedFilters" class="nav nav-list dashboard-list"> <li ng-repeat="filter in reportDetail.savedFilters"> <a uid="savedFilter" href="" ng-click="reportDetail.loadSavedFilters(filter.filters)"> <span ng-bind="filter.title"></span> </a> </li> </ul>

And here is my controller

(function(){ 'use strict'; var ReportDetailController = function(ReportsService, $scope){ var _locList = {}; var _hospitalStatusList = {}; var _providerStatusList = {}; var _savedFilters = []; var _sourceTypeList = {}; var _dateRangeList = {}; var _init = function(){ ReportsService.getCurrentReportSavedFilters().then(function(data){ $scope.reportDetail.savedFilters =data; $scope.hasSavedFilters = ReportsService.hasSavedFilters(); }); ReportsService.getLOCListForDDL().then(function(data){ $scope.reportDetail.locList = data; //$scope.reportDetail.selectedLoc = $scope.reportDetail.locList[0]; }); ReportsService.getSelectListData() .then(function(data){ $scope.reportDetail.sourceTypeList = data.CONNECTION_TARGET_STATUS; $scope.reportDetail.hospitalStatusList = data.CONNECTION_SOURCE_STATUS; }); ReportsService.getDateRangesForDDL() .then(function(data){ $scope.reportDetail.dateRangeList = data; }); $scope.reportDetail.providerStatusList = ReportsService.getProviderStatusForDDL(); }; var _loadSavedFilters = function(filters){ for(var i = 0, l = $scope.reportDetail.locList.length; i<l; i++){ if($scope.reportDetail.locList[i].serviceName == filters.levelOfCare){ $scope.reportDetail.selectedLoc = $scope.reportDetail.locList[i]; console.log($scope.reportDetail.selectedLoc); } } } var _isActive = function(filter){ for(var i = 0, l = $scope.reportDetail.savedFilters.length; i<l; i++){ if(filter.title == $scope.reportDetail.savedFilters[i].title){ return true; } return false; } } var _generateReport = function(){ return ReportsService.generateReport(); }; $scope.reportDetail = { init: _init, selectedLoc: null, isActive: _isActive, locList: _locList, selectedHospitalStatus: 'NOTIFIED', hospitalStatusList: _hospitalStatusList, selectedProviderStatus: 'NEW', providerStatusList: _providerStatusList, selectedSourceType: 'CONNECTED', sourceTypeList: _sourceTypeList, selectedDateRange: '', dateRangeList: _dateRangeList, savedFilters: _savedFilters, loadSavedFilters: _loadSavedFilters, generateReport: _generateReport }; $scope.reportDetail.init(); }; app.controller('ReportDetailController', ['ReportsService', '$scope', ReportDetailController]); })();

最满意答案

你只需要将ng-model设置为它应该是什么，所以在这种情况下你应该将reportDetail.selectedLoc设置为它应该是的loc.dbid 。

例如： http ： //jsfiddle.net/uWLua/1/

注意：确保它们具有相同的类型，因此在您的示例中确保它们是整数或两个字符串，如果您有一个为5073而另一个为"5073" ，则不会知道它们是相同的

我更新了小提琴，表明字符串和数字不做同样的事情。

Due to time constraints I ended up going a different route. I created an event bus of sorts in my service layer and subscribe to the even in my controller, updating the model, and used ng-repeat with ng-selected.

I'm still interested to understand why this was not working with ng-options. The model and ng-options types matched, and everything appeared to be wired up correctly. When I have more time i'll re-address the original issue. Thanks for all who responded!