Question

我无法使用用户提供的输入过滤某些数据。我想要做的是从用户获取开始日期和结束日期，然后在选定的时间段内从第三方服务返回天气数据。现在我的计划是有一个用户可以点击的按钮，然后一个模态将下拉天气数据。由于这些是两个不同的视图，我似乎无法在预订视图上使用模型来过滤天气视图上的数据。我尝试构建一个自定义过滤器，但我无法得到任何工作。

解决此问题的最佳方法是什么？

天气视图

    <div class="modal-header">
 <h3 class="modal-title">Average Weather Temps</h3>

</div>

<div class="modal-body" ng-controller="weatherCtrl">
    <div ng-init="weather = (day | ascendingSort)" ng-repeat="weat in weather">
        {{weat.averageTemp}}
        {{weat.skyCondition}}
        {{weat.chanceOfPrecip}}
        {{weat.day | relativedate}}
    </div>
</div>

<div class="modal-footer">
    <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
</div>

预订视图中的输入

 <div ng-controller="DatepickerCtrl">
        <div class="row">
            <div class="col-md-6">
                <p class="input-group">
                    <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="reservation.dateIn"  is-open="popup1.opened" show-button-bar="false" placeholder="Enter Start Date" name="startDate" id="startDate" ng-required="true"/>
                    <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
                </p>
                <div class="message" ng-show="bookingForm.startDate.$touched && bookingForm.startDate.$invalid" class="message">Start Date Required</div>
            </div>

            <div class="col-md-6">
                <p class="input-group">
                    <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="reservation.dateOut" is-open="popup2.opened"  show-button-bar="false" min-date="minDate" placeholder="Enter End Date" name="endDate" id="endDate" ng-required="true"/>
                    <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
                </p>
                <div class="message" ng-show="bookingForm.endDate.$touched && bookingForm.endDate.$invalid" class="message">End Date Required</div>
            </div>
        </div>
    </div>

气象控制器和工厂

app.factory('getWeather',  function($resource){
return $resource('http://localhost:3000/api/weather')
});

app.controller('weatherCtrl', function ($scope, getWeather) {
$scope.weather = getWeather.query();
});

来自网络服务的样本JSON

 {
    "averageTemp": 0,
    "chanceOfPrecip": "0.1849",
    "skyCondition": "sunny",
    "month": 11,
    "day": 362
},
{
    "averageTemp": 3,
    "chanceOfPrecip": "0.7055",
    "skyCondition": "sunny",
    "month": 11,
    "day": 363
},
{
    "averageTemp": 26,
    "chanceOfPrecip": "0.3572",
    "skyCondition": "sunny",
    "month": 11,
    "day": 364
},

自定义日期范围过滤器与第三方服务

0 个答案: