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

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

然后，你只需要在你的0中设置，...

希望它有帮助。