Question

我有一个视图，其中包含用于过滤报表的下拉列表。我还有一个显示为链接的已保存过滤器的视图。当用户点击他们保存的过滤器时，我希望选择适当的下拉列表值。下降正在适当填充。在保存的过滤器链接上有一个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]);
})();

Answer 1

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

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

注意：确保它们具有相同的类型，因此在您的示例中确保它们既可以是整数，也可以是两个字符串，如果您有一个5073且一个为{1}，则它们不会知道它们是相同的"5073"

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

Answer 2

您需要自定义指令或类似于此two approaches

的内容

<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执行一些复杂的操作

Answer 3

ng-model和表达式ng-options -must-匹配，以便Angular比较值并查看哪个选项被“选中”。就像'戴夫'所说的那样。

Answer 4

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

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

Answer 5

如果我理解，总而言之，您有一个填充了列表的选项，并且您希望以编程方式设置其中一个要选择，请将其键入默认权限？

如果是这样，您可以使用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];

});

我希望我有所帮助

如何以编程方式选择ng-option值？

5 个答案: