AngularJS Conditional ngStyle not applying

Question

I am trying to make my input width respond to an AngularJS scope variable, by setting it's width conditionally with ng-style. I have gotten this to work beautifully with text-align, but for some reason it is not working with width...

The HTML:

<body ng-app="vfApp">
    <!--This works...  --> <input resize ng-style="{ 'width' : '100%' }" type="text"/>
    <!--This does not?!--> <input resize ng-style="{ 'width' : doResize ? '100%' : '10%' }" type="text"/>
</body>

The JS:

var vfApp = angular.module('vfApp', []);
vfApp.directive('resize', function () {
    return function ($scope) {
        $scope.doResize = false;
    };
});

EDIT: This is different from the suggested possible duplicate because I am not trying to apply a static CSS class, I am trying to use a variable to conditionally apply a style inline.

Possible duplicate of Angular ng-style with a conditional expression — Gonzalo.-
– Gonzalo.-, Commented Nov 17, 2016 at 2:12
the solutions are different enough that it could not be a duplicate, though I'm not positive if that's enough to differentiate. — David Archibald
– David Archibald, Commented Nov 17, 2016 at 5:06

kukkuz · Accepted Answer · 2016-11-17 02:44:13Z

1

I see you are using Angular 1.0.1. You can use this:

ng-style="doResize && {'width':'100%'} || {'width':'10%'}"

See demo below:

var vfApp = angular.module('vfApp', []);
vfApp.directive('resize', function($window) {
  return function($scope) {
    $scope.doResize = true;
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>

<body ng-app="vfApp">
  <!--This works...-->
  <input resize ng-style="{ 'width' : '100%' }" type="text" />
  <!--This does not?!-->
  <input resize ng-style="doResize && {'width':'100%'} || {'width':'10%'}" type="text" />

  <br/>isMobile value: {{doResize}}

</body>

answered Nov 17, 2016 at 2:44

kukkuz

42.5k6 gold badges65 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kukkuz Over a year ago

@KenSchnetz let me know your feedback on this, thanks!

KenSchnetz Over a year ago

Perfect... what's wierd to me is that the way was doing it in my JSFiddle works with text-alignment no problem, but it doesn't work for width. Your solution however works great!! Thank you.

David Archibald · Accepted Answer · 2016-11-17 02:12:25Z

0

If you are aiming for the 100% width value, the problem is simple the ternary expression:

doResize ? '100%' : '10%'.

in your js file doResize is false. If you don't understand ternary expressions, they are a condensed if. The uncompressed form of your code is:

if(doResize) {
  return '100%';
} else {
  return '10%';
}

So you have two options to fix it:

Change $scope.doResize = false; to $scope.doResize = true;
Change the ternary expression to doResize ? '10%' : '100%';

Hope that helps.

answered Nov 17, 2016 at 2:12

David Archibald

1,54014 silver badges28 bronze badges

3 Comments

KenSchnetz Over a year ago

I understand the doResize is false, I condensed my overall code to solve this problem before implementing it in my website. Also, the problem isnt that I am not getting the 100% width, i'm not getting the 10% width either. Thank you for your time!

David Archibald Over a year ago

sorry, I misunderstood.

KenSchnetz Over a year ago

Please don't be sorry, I probably didn't explain it well enough!! Thank you so much for your time.

Collectives™ on Stack Overflow

AngularJS Conditional ngStyle not applying

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related