Question

我在不同屏幕尺寸上的角度元素共享同一个控制器。为什么我在小屏幕尺寸（select）上修改我的options SM，并且当缩小屏幕到超小（XS）时，所有更改都已丢失？

我有两个单独的HTML文件，以保持每个文件更小，更结构化。由于我的平板电脑和手机设计可能非常不同。

如何在不同屏幕尺寸之间切换时保留更改，我该怎么做？

感谢您的帮助！

的index.html

SM.html

    <div ng-controller="PassengerController as pd">

        <div class="col-sm-2">
            <div class="form-group">
                <label class="control-label" for="selectSMFrom12">12+ years</label>
                <select ng-init="adults" ng-model="adults" ng-options="value as value for value in adultValues" class="form-control" id="selectSMFrom12"></select>
            </div>
        </div>

        <div class="col-sm-2">
            <div class="form-group">
                <label class="control-label" for="selectSMUnder12">12+ years</label>
                <select ng-init="childrenUnder12" ng-model="childrenUnder12" ng-options="value as value for value in childrenUnder12Values" class="form-control" id="selectSMUnder12"></select>
            </div>
        </div>

        <div class="col-sm-2">
            <div class="form-group">
                <label class="control-label" for="selectSMInfants">12+ years</label>
                <select ng-init="infantsUnder2" ng-model="infantsUnder2" ng-options="value as value for value in infantsUnder2Values" class="form-control" id="selectSMInfants"></select>
            </div>
        </div>
    </div>

XS.html

    <div ng-controller="PassengerController as pd">
        <div class="col-xs-4">
            <div class="form-group">
                <label class="control-label" for="selectXSFrom12">12+ years</label>
                <select ng-init="adults" ng-model="adults" ng-options="value as value for value in adultValues" class="form-control" id="selectXSFrom12"></select>
            </div>
        </div>

        <div class="col-xs-4">
            <div class="form-group">
                <label class="control-label" for="selectXSUnder12">12+ years</label>
                <select ng-init="childrenUnder12" ng-model="childrenUnder12" ng-options="value as value for value in childrenUnder12Values" class="form-control" id="selectXSUnder12"></select>
            </div>
        </div>

        <div class="col-xs-4">
            <div class="form-group">
                <label class="control-label" for="selectXSInfants">12+ years</label>
                <select ng-init="infantsUnder2" ng-model="infantsUnder2" ng-options="value as value for value in infantsUnder2Values" class="form-control" id="selectXSInfants"></select>
            </div>
        </div>
    </div>

app.js

var app = angular.module("myModule");



app.controller('PassengerController', ['$scope', function($scope) {


    $scope.adults = 1;
    $scope.childrenUnder12 = 0;
    $scope.infantsUnder2 = 0;


    $scope.adultValues = [1,2,3,4,5,6,7,8,9,10];
    $scope.childrenUnder12Values = [0, 1,2,3,4,5,6,7,8,9,10];
    $scope.infantsUnder2Values = [0, 1,2,3,4,5,6,7,8,9,10];



}]);

var app = angular.module("fridayFly", ['ui.bootstrap']);


app.directive('searchBarSm', function() {
    return {
        restrict: 'E',
        templateUrl: 'templates/search-bar/SM.html'
    };
});

app.directive('searchBarXs', function() {
    return {
        restrict: 'E',
        templateUrl: 'templates/search-bar/XS.html'
    };
});

Answer 1

在重新调整大小时，不应该更改视图，只是为了应用不同的类。您应该添加所需的类。你正在使用bootstrap，所以应该是这样的：

<div class="col-sm-2 col-xs-4">

您只需要一个视图。现在，当您更改屏幕尺寸时，类和＆amp;样式表负责其余部分。

所以在你的情况下，你只需要一个：

    <div ng-controller="PassengerController as pd">    
        <div class="col-sm-2 col-xs-4">
            <div class="form-group">
                <label class="control-label" for="selectSMFrom12">12+ years</label>
                <select ng-init="adults" ng-model="adults" ng-options="value as value for value in adultValues" class="form-control" id="selectSMFrom12"></select>
            </div>
        </div>

        <div class="col-sm-2 col-xs-4">
            <div class="form-group">
                <label class="control-label" for="selectSMUnder12">12+ years</label>
                <select ng-init="childrenUnder12" ng-model="childrenUnder12" ng-options="value as value for value in childrenUnder12Values" class="form-control" id="selectSMUnder12"></select>
            </div>
        </div>

        <div class="col-sm-2 col-xs-4">
            <div class="form-group">
                <label class="control-label" for="selectSMInfants">12+ years</label>
                <select ng-init="infantsUnder2" ng-model="infantsUnder2" ng-options="value as value for value in infantsUnder2Values" class="form-control" id="selectSMInfants"></select>
            </div>
        </div>
    </div>

屏幕大小更改时的角度引导范围

1 个答案: