2

I have this html (below), for an input color type, I want to show the Font Awesome icons instead of the input, which works fine, the thing is that by setting the display of the input to none, the model is not being updated by the new color, this works fine if I remove the display setting. Any suggestions?

<label for="color{{id_form_group}}" class="fa-stack">
        <i class="fa fa-square-o fa-stack-2x"></i>
        <i class="fa fa-paint-brush fa-stack-1x" style="color:{{objeto.style.color}};"></i>
        <input id="color{{id_form_group}}" ng-model="objeto.style.color" type="color" style="display:none;">
</label>
Typo
  • 1,875
  • 1
  • 19
  • 32

3 Answers3

0

Ok changing the css to style="visibility:hidden;" instead of style="display:none;" did the trick, I'm not sure why, if any one has a better answer or an explanation to why this happens, please post it and I'll mark your answer as correct.

Typo
  • 1,875
  • 1
  • 19
  • 32
  • 2
    The answer to that is here: [What is the difference between visibility:hidden and display:none?](https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone). Key points: `visibility:hidden` : **The tag is rendered**, `display:none;` **it is not** – lealceldeiro Nov 09 '17 at 15:32
  • @lealceldeiro well...if it was for that answer display none should work..."...although you can still interact with it through the dom..." or do you mean that angular only works with rendered elements? – Typo Nov 09 '17 at 15:34
  • Yes, you're right. Maybe this is another thing to do with the AngularJS internals and worth of posting a question here on SO about it ;) – lealceldeiro Nov 09 '17 at 15:40
0

You don't have to use display:none with angularjs because it provides ng-hide and ng-show directives

This should do the trick,

<input id="color{{id_form_group}}" ng-model="objeto.style.color" type="color" ng-hide="true"">
Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
  • Hi, setting it to visibility:hidden works too. Why would one work while the other doesnt? – Typo Nov 09 '17 at 15:30
  • i hope you got the answer in the below commnet – Sajeetharan Nov 09 '17 at 15:38
  • not really, that answer explains the difference between display none and visibility, not how angular works with elements according to their style. – Typo Nov 09 '17 at 15:40
  • why did you remove the answer? actually everything is explained here https://docs.angularjs.org/api/ng/directive/ngShow – Sajeetharan Nov 09 '17 at 15:50
  • Sorry to rush in with the accepted answer, I've tried your solution and doesn't work. Maybe I forgot to mention that the html it's the template of another directive. Does that has something to do with it? – Typo Nov 09 '17 at 15:50
  • the chosen value is not being set to the model – Typo Nov 09 '17 at 15:51
  • 1
    plus, according to the documentation ng-hide is setting the display to none – Typo Nov 09 '17 at 15:56
0

You will probably need to post the rest of your code, because I am able to get it to work fine with your code snippet:

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

app.controller('MainCtrl', function($scope) {
  $scope.objeto = {
    style: {
      color: ""
    }
  }
});
<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <p>Color: <span style="font-weight: bold; color: {{objeto.style.color}}">{{objeto.style.color}}</span></p>
  <form id="my-form">
    <label for="color{{id_form_group}}" class="fa-stack">
      <i class="fa fa-square-o fa-stack-2x"></i>
      <i class="fa fa-paint-brush fa-stack-1x" style="color:{{objeto.style.color}};"></i>
      <input id="color{{id_form_group}}" ng-model="objeto.style.color" type="color" style="display: none" />
    </label>
  </form>
</body>

</html>
Hoyen
  • 2,511
  • 1
  • 12
  • 13