javascript - AngularJs:无法以编程方式设置在选择中选择的选项

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-model (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 ;

就是这样!! :)