current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 3 down vote favorite

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!

share|improve this question
up vote 2 down vote

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>
share|improve this answer
up vote 1 down vote

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.

share|improve this answer
up vote 0 down vote

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

official documentation

$watch how $apply runs $digest

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.