Show/hide element AngularJS based on Controller boolean variable

Question

I am trying to hide/show a portion of a form based on a Controller boolean variable. this is my html code:

<div id="sheetform-container" ng-controller="SheetController as SheetCtrl">
  <form action="#">
    <div class="sheetform-row" ng-show="canShow('Price')">
      <div class="sheetform-left-col fl-left"><label for="sheetform-price">Price</label></div>
      <div class="sheetform-midlle-col fl-left"><input type="text" class="sheetform-input" id="sheetform-price" name="price" value="$ 0.00" /></div>
      <div class="sheetform-right-col fl-right"></div>
    </div>
  </form>
</div>

I have created a function that changes the Price attribute to true/false according to the value sent, its called setConfig. This is how the Controller code looks like:

ngApp.controller('SheetController', ['$scope', function($scope) {
    $scope.Price = true;

    $scope.canShow = function(field) {
        return $scope.Price;
    }

    $scope.setConfig = function(config) {
        $scope.Price = config.Price;
    }
}]);

Any idea what am I missing?

Thanks!

Rorschach120 · Accepted Answer · 2014-08-10 03:10:31Z

If you are intending for price to be the actual price of something then you shouldn't be using that for the boolean in this case. Assign the price using ng-model. Also, don't use a capital letter to name a variable. Only classes should be capitalized.

<div id="sheetform-container" ng-controller="SheetController as SheetCtrl">
  <form action="#">
    <div class="sheetform-row" ng-show="showPrice">
      <div class="sheetform-left-col fl-left"><label for="sheetform-price">Price</label></div>
      <div class="sheetform-midlle-col fl-left"><input type="text" class="sheetform-input" id="sheetform-price" name="price" ng-model="price" /></div>
      <div class="sheetform-right-col fl-right"></div>
    </div>
  </form>
</div>

Then in your controller you can remove the function you have and also initialize the variables

ngApp.controller('SheetController', ['$scope', function($scope) {
    $scope.showPrice = true;
    $scope.price = null;

}]);

I'm not sure how you are determining whether the price should be shown or not but you can either have $scope.showPrice assigned to a property in whatever object the form is for or if it's a toggle then you can just say:

<a href ng-click="showPrice = !showPrice"></a>

L.Sidhu · Accepted Answer · 2014-08-09 00:55:46Z

1

In the <div class="sheetform-row" ng-show="canShow('Price')"> canShow() function needs a boolean value so that ng-show can change the output accordingly.

'Price' is treated as a string 'Price' not a boolean in your controller.

So change it to ng-show="canShow(Price)",here Price's value will be true/false ,this will help ng-show to hide/show properly.

Also setConfig is not influencing the value of price right now.

Let me know if it helps you or u need further help.

answered Aug 9, 2014 at 0:55

L.Sidhu

901 silver badge1 bronze badge

Comments

ilj · Accepted Answer · 2014-08-07 16:44:08Z

0

you're missing $digest(). angular only updates DOM in digest loop.

official documentation

$watch how $apply runs $digest

edited Aug 7, 2014 at 16:44

answered Aug 7, 2014 at 16:34

ilj

8799 silver badges19 bronze badges

Collectives™ on Stack Overflow

Show/hide element AngularJS based on Controller boolean variable

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related