CODEWITHSUNDEEP
angularjs
airsoftFreak
airsoftFreak

Reputation: 1608

how to do ng-model the right way to choose colors?

Use case 1

  1. I choose color from button = preview's color changes
  2. I choose color from color picker works as well the preview changes
  3. If i go to step one again the preview won't changes
  4. it will only happen if i go to color picker then click the button

HTML

<!-- 1. Choose from the buttons listed -->
<div ng-repeat="color in colors">
   <button style="background-color: {{ color }}"
           ng-click="colorPicked(color)">
   </md-button>
</div>

<!-- 2. Choose from the input field -->
 <input type="text" name="fname" maxlength="7" ng-model="colorValue">

<!-- 3. Choose from color picker -->
 <input id="input-color" value="#f9ad17" type="color" name="color"
        ng-model="colorValue" ng-change="colorPicked(colorValue)"/>

<!-- Preview -->
<div style="background-color: {{ colorValue }}; width: 200px; height: 200px">
</div>

ColorController 

$scope.colors = [
        '#d13438', '#ffb900', '#00cc6a', '#107c10', '#2258af', '#70a3ed',
        '#30363d', '#881798'];

$scope.colorPicked = function (color) {
    $scope.colorValue = color;

    }
}

UI

enter image description here

enter image description here

I have no idea what is the problem

Upvotes: 1

Views: 2651

Answers (3)

georgeawg
georgeawg

Reputation: 48968

Change as so:

<input id="input-color" ̶v̶a̶l̶u̶e̶=̶"̶#̶f̶9̶a̶d̶1̶7̶"̶ type="color" name="color"
       ng-model="colorValue" ̶n̶g̶-̶c̶h̶a̶n̶g̶e̶=̶"̶c̶o̶l̶o̶r̶P̶i̶c̶k̶e̶d̶(̶c̶o̶l̶o̶r̶V̶a̶l̶u̶e̶)̶"̶ />

$scope.colorValue = '#f9ad17';

The DEMO

angular.module('app', [])
.controller('Ctrl', function ($scope) {
  $scope.colorValue = '#f9ad17';
  $scope.colors = [
    '#d13438', '#ffb900', '#00cc6a', '#107c10', '#2258af', '#70a3ed',
    '#30363d', '#881798'
  ];
  $scope.colorPicked = function(color) {
    $scope.colorValue = color;
  }
})
.color-button {
    height: 20px;
    width: 20px;
}
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="Ctrl">
    <!-- 1. Choose from the buttons listed -->
    <span  ng-repeat="color in colors">
      <button style="background-color: {{ color }}"
              class="color-button"
              ng-click="colorPicked(color)">
      </button>
    </span><br>

    <!-- 2. Choose from the input field -->
    <input type="text" name="fname" maxlength="7" ng-model="colorValue">

    <!-- 3. Choose from color picker -->
    <input id="input-color" type="color" name="color" ng-model="colorValue" />

    <!-- Preview -->
    <div style="background-color: {{ colorValue }}; width: 200px; height: 200px">
    </div>
</body>

Upvotes: 1

Groben
Groben

Reputation: 1386

Your error comes from this line:

ERRONEOUS

<input id="input-color" value="#f9ad17" type="color" name="color"
       ng-model="colorValue" ng-change="colorPicked(colorValue)"/>

You don't need to set the attributes value and ng-change. The initialisation of the value should be done in the controller:

$scope.colorValue = '#f9ad17';

Since the value is binded you don't need the ng-change.

Here is a complete working fiddle

Upvotes: 2

CatStrategist
CatStrategist

Reputation: 60

First of all, don't use style and interpolate values as it may get overwritten. Instead use ng-style directive:

ng-style="{'background-color': colorValue}"

Second, ng-change directive is unnecessery on input-color

Upvotes: -1

Related Questions