我如何允許用戶更改離子應用程序背景顏色

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中設置，...

希望它有幫助。