Question

我有一个要求弹出的服务。弹出窗口包含两个下拉列表。要求用户选择两个下拉列表，然后按确定返回服务。

在弹出的下一个调用中，我希望弹出窗口将显示用户选择的先前选项。

每当我回到弹出窗口时，下拉已满，但没有选择发生，我无法弄清楚我错过了什么。

调用弹出窗口的服务：

app.service('OriginalService', [ '$modal',

function ($modal) {
    var that = this;

    this.filtersMananger = { // my-ng-models for the two drop-down-lists
        firstFilter: "",
        secondFilter: ""
    };

    this.openDialog = function(){
        var modalInstance = $modal.open({
            templateUrl: 'ModalScreen.html',
            controller: 'ModalController',
            resolve: {
                filtersManagerObject: function () {
                    return that.filtersMananger;
                }
            }
        });

        modalInstance.result.then(function (filtersMananger) {
            that.filtersMananger.firstFilter = filtersMananger.selectedFirstFilter;
            that.filtersMananger.secondFilter = filtersMananger.selectedSecondFilter;
        }, function () {

        });
    };
}
]);

弹出html：

<div class="data-filters-container">
     <div class="data-filter">
        <label for="filter-data-drop-down">FIRST FILTER</label>
        <select name="filterDataDropDown" ng-model="filtersMananger.selectedFirstFilter" ng-options="filter.value as filter.name for filter in filterDropDownItems"></select>
    </div>
      <div class="data-filter col-xs-4">
        <label for="filter-data-drop-down">SECOND FILTER</label>
        <select name="filterDataDropDown" ng-model="filtersMananger.selectedSecondFilter" ng-options="filter.value as filter.name for filter in filterDropDownItems"></select>
    </div>
</div>

代码：

app.controller('ModalController', ['$scope', '$modalInstance', 'filtersManagerObject',
                                     function ($scope, $modalInstance, filtersManagerObject) {

    $scope.filtersMananger = {
        selectedFirstFilter : "",
        selectedSecondFilter : ""
    };

    $scope.filterDropDownItems = [

        {name: "4h", value: "lastFourHours"},
        {name: "24h", value: "lastDay"},
        {name: "All", value: "all"}
    ];                                                                              

    /*
    * The function checks if the the values in filters are not "".
    * If there are not so we found the selected filter and returns it.
    */
    $scope.fillPreviousSelections = function(){
        if ($scope.isfiltersManagerObjectNotEmpty()){
            $scope.fillSelections();
        }
    };

    $scope.isfiltersManagerObjectNotEmpty = function(){
        return (filtersManagerObject.firstFilter !== "" || filtersManagerObject.secondFilter !== "");
    };

    $scope.fillSelections = function(){
        if (filtersManagerObject.firstFilter !== ""){
            $scope.findDropDownItem(filtersManagerObject.firstFilter);
        }
    };

    $scope.findDropDownItem = function(filterValue){
        var isFound = false;
        for (var i = 0; i < $scope.filterDropDownItems.length && !isFound; i++){
            var dropDownItem = $scope.filterDropDownItems[i];
            if (dropDownItem.value === filterValue){
               //////////////////////////////////////////////////////////////
               Maybe the problem is here:
                $scope.filtersMananger.selectedOneFilter = dropDownItem;

                /////////////////////////////////////////////////////////////
                isFound = true;
            }
        }
    };

    $scope.fillPreviousSelections();

    $scope.ok = function () {
        $modalInstance.close($scope.filtersMananger);
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
}]);

Answer 1

我发现了问题：）

查看选择标记：

<select name="filterDataDropDown" ng-model="filtersMananger.selectedFirstFilter" ng-options="filter.value as filter.name for filter in filterDropDownItems"></select>

这种情况下的ng模型（filtersMananger.selectedFirstFilter）保存值（filter.value）。

所以在我的函数中，我从名为

的下拉列表中搜索正确的项目

$scope.findDropDownItem

我需要返回项目的值而不是项目本身。

 $scope.findDropDownItem = function(filterValue){
        var isFound = false;
        var dropDownItemToReturn = "";
        for (var i = 0; i < $scope.filterDropDownItems.length && !isFound; i++){
            var dropDownItem = $scope.filterDropDownItems[i];
            if (dropDownItem.value === filterValue){
                dropDownItemToReturn = dropDownItem;
                isFound = true;
            }
        }
       //my change:
        return dropDownItemToReturn.value;
    };

之后我将返回的值分配给模型：

var previousDropDownItem =  $scope.findDropDownItem(filtersManagerObject.oneFilterFilter);
$scope.filtersMananger.selectedOneFilter = previousDropDownItem ;

那就是!! ：）

AngularJs：无法以编程方式将选项设置为select

1 个答案: