Angular:使用选择列表选择过滤代码中的对象

时间:2016-05-15 20:50:22

标签: javascript angularjs foreach underscore.js angularjs-filter

我在JSON中有一组看起来像这样的对象,并被分配给 $ rootScope.filteredData对象

$scope.mapSelections = function(region, state, city, therapy, phase, compound) {
    $rootScope.filteredPins = [];

    if (!$scope.selectRegion) {
        var region = '';
    } else {
        var region = $scope.selectRegion.Region;
    }

    if (!$scope.selectState) {
        var state = '';
    } else {
        var state = $scope.selectState.StateName;
    }

    if (!$scope.selectCity) {
        var city = '';
    } else {
        var city = $scope.selectCity.CityName;
    }

    if (!$scope.selectTherapy) {
        var therapy = '';
    } else {
        var therapy = $scope.selectTherapy;
    }

    if (!$scope.selectPhase) {
        var phase = '';
    } else {
        var phase = $scope.selectPhase;
    }

    if (!$scope.selectCompound) {
        var compound = '';
    } else {
        var compound = $scope.selectCompound;
    }

    $rootScope.filteredData.forEach(function(itemElement, itemIndex) {

        if ((itemElement.TherapeuticArea === therapy && therapy != '') || (itemElement.Compound === compound && compound != '') || (itemElement.Phase === phase && phase != '')) {
            console.log('you have a hit on : ' + therapy + ' / Phase: ' + phase + ' / Compound: ' + compound);

            itemElement.Locations.forEach(function(locationElement, locationIndex) {
                if (locationElement.Region === region || !region) {

                    locationElement.Sites.forEach(function(siteElement, siteIndex) {
                        if ((siteElement.State == state && !city) || (siteElement.City == city && siteElement.State == state) || (!state && !city)) {

                            if (siteElement.Longitude != '' && siteElement.Latitude != '') {
                                $rootScope.filteredPins.push(siteElement);
                                $rootScope.filteredDataMapItems.push(itemElement);
                                // console.table(filteredPins)
                                return false;
                            }

                        }
                    });
                }
            });
        }
    });
};

我有3个选择列表,显示“Compound”,“Phase”和“TherapeuticArea”字段中的所有值,以及3个显示Region,State和City的选择列表。从每个选择列表中选择项目允许您根据这六个值过滤此信息的视图。

我正在使用Angular的内置过滤器过滤当前标记中的这些项目,但需要在代码中重写它。使用.forEach,我能够分别对每个项目进行过滤,但不像Angular过滤器那样合作。例如,如果我只过滤“复合”或“相位”,我会得到我应该得到的结果。但是,如果我过滤“复合”和“相位”或三个过滤器的任意组合,我没有得到我期望的结果。

我有一个内部.forEach,它通过选择进行另一个循环来获取位置lat / lng(它被送到另一个在地图上绘制它们的方法)。那部分似乎应该像它应该的那样工作。但外部没有。

以下是代码:

<column>
  <select name="selectRegion" class="form-control" ng-model="selectRegion" ng-change="regionSelected(); mapSelections(selectRegion.Region, null, null, selectTherapy, selectPhase, selectCompound)" ng-options="location as location.Region for location in locationObject | orderBy: location.Region:reverse track by location.Region">
    <option value="">Select Region</option>
  </select>

  <select name="selectState" class="form-control" ng-disabled="!selectRegion" ng-model="selectState" ng-change="mapSelections(selectRegion.Region, selectState.StateName, null, selectTherapy, selectPhase, selectCompound)" ng-options="state as state.StateName for state in selectRegion.States | unique: 'state.StateName' | orderBy: 'StateName' ">
    <option value="">{{regionSelectMsg}}</option>
  </select>

  <select name="selectCity" class="form-control" ng-disabled="!selectState" ng-model="selectCity" ng-change="mapSelections(selectRegion.Region, selectState.StateName, selectCity.CityName, selectTherapy, selectPhase, selectCompound)" ng-options="city as city.CityName for city in selectState.Cities | unique: 'city.CityName' | orderBy: 'CitytName' ">
    <option value="">Select City</option>
  </select>
</column>
<column>
  <select name="selectTherapy" class="form-control" ng-model="selectTherapy" ng-options="data.TherapeuticArea as data.TherapeuticArea for data in dataObject | unique: 'TherapeuticArea' | orderBy: 'TherapeuticArea' " ng-change="mapSelections(null, null, null, selectTherapy, selectPhase, selectCompound)">
    <option value="">Select Therapeutic Area</option>
  </select>
  <select name="selectPhase" class="form-control" ng-model="selectPhase" ng-options="data.Phase as ('Phase ' + data.Phase) for data in dataObject | unique: 'Phase' | orderBy: 'Phase' : reverse " ng-change="mapSelections(null, null, null, selectTherapy, selectPhase, selectCompound)">
    <option value="">Select Phase</option>
  </select>
  <select name="selectCompound" class="form-control" ng-model="selectCompound" ng-options="data.Compound as data.Compound + '&nbsp;' + data.Compound_2 for data in dataObject | unique: 'Compound' | orderBy: 'Compound' " ng-change="mapSelections(null, null, null, selectTherapy, selectPhase, selectCompound)">
    <option value="">Select Compound</option>
  </select>
</column>
Private Sub Worksheet_SelectionChange(ByVal Target As Range)
    If Selection.Count = 1 Then
        Dim name As String
        Dim triggerCol As String
        Dim tableToFilter As String
        Dim ClickedInTable As Boolean

        Dim lowerColName As String
        Dim lower As String
        Dim upperColName As String
        Dim upper As String

        Dim colToFilterRelativeIndex As Integer
        Dim colToFilter As String

        Dim inHeader As Boolean
        Dim inTriggerCol As Boolean

        Dim lowerIsHeader As Boolean

        Dim lowerCell As Range
        Dim upperCell As Range

        tableToFilter = "Olive"
        colToFilter = "Time Visited"

        lowerColName = "End time"
        upperColName = "Start time"
        triggerCol = "ClickMe"

        ClickedInTable = Not (ActiveCell.ListObject Is Nothing)

        If ClickedInTable Then
            inTriggerCol = (GetColumnName() = triggerCol)
            If inTriggerCol Then

                inTableBody = Not (ActiveCell.ListObject.Range.row = ActiveCell.row)

                If inTableBody Then

                    Set lowerCell = Range(GetNeighborCell(lowerColName)).Offset(-1)
                    Set upperCell = Range(GetNeighborCell(upperColName))

                    lowerIsHeader = (lowerCell.row = ActiveCell.ListObject.Range.row)
                    If Not (lowerIsHeader) Then
                        lower = lowerCell.Text
                        upper = upperCell.Text

                        colToFilterRelativeIndex = ActiveSheet _
                            .ListObjects(tableToFilter) _
                            .ListColumns(colToFilter).index

                        ActiveSheet.ListObjects(tableToFilter).Range.AutoFilter _
                            Field:=colToFilterRelativeIndex, _
                            Criteria1:=">=" & lower, _
                            Operator:=xlAnd, _
                            Criteria2:="<=" & upper

                        ActiveCell.Value = lower & " - " & upper
                    Else
                        ActiveCell.Value = "N/A"
                    End If
                End If
            End If
        End If
    End If
End Sub

我也在这个项目中使用了underscoreJS,如果有一个最适合过滤这些类型条件的下划线方法,我愿意使用它。

1 个答案:

答案 0 :(得分:0)

我只需要将过滤后的结果保存在我过滤的同一个对象上,这样每个迭代过滤器都会将对象进一步削减到所需的数据集。

if (therapy != '') {
  filteredPins = _.filter(filteredPins, function(item) {
    return item.TherapeuticArea === therapy;
  });
}

if (phase != '') {
  filteredPins = _.filter(filteredPins, function(item) {
    return item.Phase === phase;
  });
}

if (compound != '') {
  filteredPins = _.filter(filteredPins, function(item) {
    return item.Compound === compound;
  });
}