Question

如何允许用户使用Angular在离子中更改应用程序颜色。 E.G，我想创建一个按钮，当它被点击时它应该带下一些颜色，当选择颜色时它应该改变应用背景颜色

Answer 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%;
}

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

希望它有所帮助。

如何允许用户更改离子中的应用程序背景颜色

1 个答案: