Передать строку в угловой метод из ng-repeat

0

Я хотел бы добавить некоторые предопределенные цвета для выбора пользователем. Я создал массив $ scope с цветами и создал кнопки элементами массива. Каждая кнопка имеет атрибут ng-click, где я хочу вызвать метод на контроллере, который должен обрабатывать переданное свойство цвета.

Мой html:

<button ng-repeat="color in colors" style="background-color:{{color}};" ng-click="ChangeBgColor(color)"></button>

И контроллер:

 $scope.colors = ['#ddd', '#b2b2b2', '#0c60ee', '#0a9dc7', '#28a54c', '#e6b500', '#e42112', '#6b46e5', '#111', 'orange', 'yellow', 'maroon', 'green', 'brown', 'lightblue'];
 $scope.ChangeBgColor = function(selectedColor)
   {
     console.log(selectedColor);
     $scope.selectedProduct.bgcolor = selectedColor;  
   }

На консоли console.log в контроллере всегда есть первый элемент массива, #ddd. Я даже пытался с ChangeBgColor ('{{color}}') тоже, но это тоже не помогло. (Тот же результат при проверке DOM я могу видеть разные цвета в качестве параметров строки.)

Лучшим способом было бы привязать свойство selectedProduct.bgcolor к ng-repeat и позволить угловому делать выбор и изменять, когда пользователь выбирает другой цвет, но я новичок в угловом, и это кажется слишком сильным в течение дня.

  • 1
    jsfiddle.net/stevenkaspar/bu9r82ct это не то, что вы ищете. Я не вижу проблемы
  • 0
    @StevenKaspar StevenKaspar У меня тот же код, и мой не работает. Тот, что в вашем jsfiddle, работает, он передает выбранный цвет в метод.
Показать ещё 3 комментария
Теги:

2 ответа

0
Лучший ответ

Проблема заключалась в том, что я помещал все кнопки в одну метку:

<label class="item item-input">
    <span class="input-label">Háttérszín</span>
    <button ng-repeat="color in colors" ng-style="{'background-color':color}" ng-click="ChangeBgColor(color)"></button>
</label>

Если я сменю ярлык на div, он работает как ожидалось. Я не понимаю, кстати, я использую ионный, просто забыл упомянуть. Спасибо за вашу помощь!

Поделиться
0

Для этого используйте директиву ng-style.

 <button ng-repeat="color in colors" ng-style="{'background-color':color}" ng-click="ChangeBgColor(color)"></button>


var app = angular.module("app",[]);

app.controller("MyCtrl" , function($scope){
    $scope.colors = ['#ddd', '#b2b2b2', '#0c60ee', '#0a9dc7', '#28a54c', '#e6b500', '#e42112', '#6b46e5', '#111', 'orange', 'yellow', 'maroon', 'green', 'brown', 'lightblue'];
  $scope.selectedProduct = {bgcolor:""};
 $scope.ChangeBgColor = function(selectedColor)
   {
     console.log(selectedColor);
     $scope.selectedProduct.bgcolor = selectedColor;  
   };
  
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
   
  <div ng-style="{'background-color':selectedProduct.bgcolor}">
    This is a test!
  </div>  
  <button ng-repeat="color in colors" ng-style="{'background-color':color}" ng-click="ChangeBgColor(color)">{{color}}</button>
  
</div>
Поделиться
  • 0
    Спасибо за стиль ng, но метод все равно получает #ddd каждый раз, независимо от того, на какую кнопку я нажимаю.
  • 0
    см мой обновленный ответ.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню