AngularJs：無法設置選項在選擇編程

我有一個服務，調用彈出。彈出窗口包含兩個下拉列表。要求用戶選擇兩個下拉列表，然後按確定返回到該服務。AngularJs：無法設置選項在選擇編程

在接下來的彈出窗口中，我想彈出窗口會顯示用戶選擇的以前的選項。

每次我回到彈出的下拉列表已滿，但沒有選擇發生，我無法弄清楚我失蹤了。

，調用彈出的服務：

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'); 
    }; 
}]);

來源

2014-10-09 Aviade

我發現了問題:)

看看select標籤：

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

而且它！ :)

來源

2014-10-10 06:46:38 Aviade

AngularJs：無法設置選項在選擇編程

回答

相關問題