5

我有一个充满下拉列表来过滤报告的视图。我还可以查看显示为链接的已保存过滤器。当用户单击他们保存的过滤器时，我希望选择下拉列表的适当值。下拉菜单已正确填充。在已保存的过滤器链接上，有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]);
})();
4

5 回答 5

7

您只需要将其设置为ng-model应有的值，因此在这种情况下，您可以将其设置reportDetail.selectedLoc为loc.dbid应有的值。

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

注意：确保它们具有相同的类型，因此在您的示例中确保它们都是整数或两个字符串，如果您有一个 as5073和一个 as ，它将不知道它们是相同的"5073"

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

于 2014-07-16T19:18:58.403 回答
1

ng-model 和提供 ng-options 的表达式必须匹配，以便 Angular 比较值并查看“选择”的选项。正如“戴夫”所说。

于 2014-07-23T14:59:38.143 回答
1

由于时间限制，我最终选择了不同的路线。我在我的服务层创建了一个事件总线，并在我的控制器中订阅了偶数，更新了模型，并将 ng-repeat 与 ng-selected 一起使用。

我仍然有兴趣了解为什么这不适用于 ng-options。模型和 ng-options 类型匹配，并且一切似乎都正确连接。当我有更多时间时，我将重新解决原始问题。感谢所有回复的人！

于 2014-07-23T16:43:54.543 回答
0

您需要自定义指令，或类似于这两种方法的东西

<div ng-controller="MyCtrl">
<h1>Approach 1</h1>
<span ng-repeat="val in dbs">
    <input type="checkbox" ng-model="val.checked">{{val.name}}
</span>
<hr/>
<h1>Approach 1</h1>
<select multiple>
    <option ng-repeat="val in dbs" name="val.name" value="val.name" ng-selected="val.checked">{{val.name}}</option>
</select>
<h4>Source (note scope changes)</h4>
{{dbs}}
</div>

你也可以ng-change用来做一些复杂的操作

于 2014-07-20T10:24:00.563 回答
-1

如果我理解，总而言之，您有一个填充列表的选择，并且您想以编程方式设置其中一个要选择，请将其键入为默认值，对吗？

如果是这样，您可以使用 ng-options 轻松解决此问题，只需将您的控制器实例与范围相关联，并将您想要的列表的位置分配给 select 的模型，例如：

选择 HTML

<select ng-model="vm.aluno_id" name="aluno_id" ng-options="aluno.nome for aluno in alunos">

控制器

app.controller("auxiliarController", function( $scope){

     //instancia controller;(Controller instance;)
     var vm = this;
     $scope.vm = vm;

     //carregando lista no scope, que será utilizado pelo angular no select
    //Loading list in scope, which will be used by angular in select
     $scope.alunos = [{id: 1, nome: "aa"}, {id: 2, nome: "bb"}];

     //setando item default no select
     $scope.vm.aluno_id = $scope.alunos[0];

});

我希望我有帮助

于 2017-03-24T11:08:31.587 回答