Question

我正在使用angularjs创建一个搜索页面，用户可以使用过滤器搜索他们想要的项目。如果用户离开此页面然后返回，我希望select标签显示之前的内容。例如，如果用户过滤掉最低价格为$ 0的商品然后离开页面但又返回到该商品，我希望select标签显示$ 0。这是我的HTML ......

            <p><b> Minimum Price: </b>
                <select class="form-control" style="width:30%" data-ng-model="minPrice" ng-options="number for number in price track by number">
                </select>
            </p>

这是我的控制器......

    $scope.search = function() {

        if( $scope.minPrice == "None") {
            $scope.minPrice = "";
        } 

        // get the search query
        $http.get("http://localhost:8080/RealEstate/houseListing/filter?" + "minPrice=" + $scope.minPrice + "&maxPrice=" + $scope.maxPrice + "&bedsTotal=" + $scope.beds + "&bathsTotal=" + $scope.baths)
        .success(function(response) {
            $scope.result = response;
            alert($scope.result);

            sessionStorage.minPrice = $scope.minPrice;
            sessionStorage.result = true;
        })
    }

    if(sessionStorage.result != null) {

        // restore the last search
        $scope.minPrice = sessionStorage.minPrice;
        $scope.search();

    } else {

我缩短了代码以便于阅读，但确切地说，我希望select标签显示用户之前选择的选项。我已将值保存到sessionStorage中，然后尝试在页面加载时恢复它，如果它存在但select标签没有显示任何内容。

Answer 1

是的，这是可能的。这是一个基于您的代码的工作plunker，我甚至将minPrice的值写入sessionstorage，然后将其读回选择模型的选定值：

http://plnkr.co/edit/n2miUv?p=preview

JS

$scope.price = [10, 11, 13, 100, 33, 57];

// Save data to sessionStorage
sessionStorage.setItem('minPrice', 13);
// Get saved data from sessionStorage
var data = sessionStorage.getItem('minPrice');

$scope.minPrice = data;

HTML

<p>
  <b> Minimum Price: </b>
  <select class="form-control" style="width:30%" 
    ng-model="minPrice"
    ng-options="number for number in price track by number"></select>
</p>

我怀疑如果它无法正常工作，您可能会遇到问题。

在Angularjs中从控制器设置选定的选项

1 个答案: