我如何允许用户在 ionic 中更改应用程序背景颜色答案

【问题标题】：How do i allow user change application background color in ionic我如何允许用户在 ionic 中更改应用程序背景颜色
【发布时间】：2016-10-15 02:36:12
【问题描述】：

我如何允许用户使用 Angular 在 ionic 中更改应用程序颜色。 E.G, i want to create a button that when it is clicked it should bring a drop down of colors and when a color is selected it should change the application background color

【问题讨论】：

如果我的回答对你有用，请告诉我。

标签： javascript angularjs ionic-framework

【解决方案1】：

您可以使用$ionicPopup。

将ng-click="selectTheme()" 添加到您的按钮，并声明如下：

.controller('yourCtrl', function($scope, $ionicPopup) {
    $scope.selectTheme = function() {
        $ionicPopup.show({
            title: 'Select Theme',
            templateUrl: 'templates/select-theme.html',
            scope: $scope,
            buttons: [{ text: 'Ok' }],
        });
    });
    $scope.themes = [
        { name: 'Theme 1', color: '#f00' },
        { name: 'Theme 2', color: '#0f0' },
        { name: 'Theme 3', color: '#00f' },
        { name: 'Theme 4', color: '#ff0' },
        { name: 'Theme 5', color: '#0ff' },
    ];
    $scope.changeTheme = function (theme) {
        $scope.bgColor = theme;
    };
    $scope.bgColor = $scope.themes[0]; // initial theme
})

然后你可以创建一个列表来选择templates/select-theme.html中的颜色：

<div class="list card">
    <div class="item" ng-repeat="theme in themes" ng-click="changeTheme(theme)">
        <div class="color-ball" style="background-color:{{theme.color}}"></div>
        <h2 ng-bind="theme.name"></h2>
        <p ng-if="theme === bgColor">(Selected)</p>
    </div>
</div>

并添加您的样式：

.color-ball {
    width: 50px;
    height: 50px;
    border-radius: 100%;
}

然后，您只需在您的<body> 中设置style="background-color:{{bgColor.color}}"，...

希望对你有帮助。

【讨论】：