ng-hide in angularjs issue

Question

i want to hide a field if a certain value of select option is selected in my form.i used ng-hide but could not get what i wanted.Initially the field should display and when i choose a certain value from another field ,the field that i want to hide should be hidden.

My code (form)

 <div class="form-group" ng-class="{ 'has-error' :submitted && (userForm.productCat.$pristine || thirdPartyForm.productCat.$invalid)}">
                <label  class="labelColor"><h5><b>Product Category</b></h5></label>
                <select id="productCat" name="productCat"  style="margin: auto; width:100%; " ng-model="user.productCat" ng-change="hideFields()" ng-options="cat.name for cat in productCatList"  required>
                    <option value="" selected="selected">--Select Type--</option>
                    <optgroup label="user.productCat.name"></optgroup>

                </select><br>

                <span class="help-inline" ng-show="submitted && (userForm.productCat.$pristine || userForm.productCat.$invalid)" >A Product Category is required.</span>


            </div>


             <!--Call Method-->
            <div ng-hide="true" >
            <div class="form-group " ng-class="{ 'has-error' :submitted && (userForm.Callmethod.$pristine || thirdPartyForm.Callmethod.$invalid) }">
                <label  class="labelColor"><h5><b>Call Method</b></h5></label>
                <select id="Callmethod" name="Callmethod"  style="margin: auto; width:100%; " ng-model="user.Callmethod"   ng-options="call.name for call in callMethodList"   required>
                    <option value="" selected="selected">--Select Type--</option>
                    <optgroup label="user.Callmethod.name"></optgroup>

                </select><br>

                <span class="help-inline" ng-show="submitted && (userForm.Callmethod.$pristine || userForm.Callmethod.$invalid)" >A Call Method is required.</span>


            </div>
            </div>

To my select field i have given 2 options as General and ISLAMIC. If i use ISLAMIC my next field should be hidden.

my js

  $scope.productCatList = [{"id":"1","name":"General"},{"id":"2","name":"ISLAMIC"}]
                                   //$scope.callMethodList = [{"id":"1","name":"PROFIT RATE"},{"id":"2","name":"PROFIT RATIO"}]
                                   $scope.hideFields = function() {
                                   if($scope.user.productCat.name == "ISLAMIC"){

                                   $scope.true= false;
                                   } 
                                   }

This is how i tried to do it but did not work.

use a different property name than true. That is simply asking for problems — charlietfl
– charlietfl, Commented Oct 26, 2014 at 11:34

dfsq · Accepted Answer · 2014-10-26 12:06:11Z

2

You should not use $scope.true property, it's really confusing because then in ng-hide="true" Angular's parser interprets it literally as true value which stays true always (however you can make it work even with this unfortunate name using square bracket notation).

Instead call your flag something like hidden and in controller handle it this way:

$scope.hidden = false;

$scope.hideFields = function() {
    $scope.hidden = $scope.user.productCat.name == "ISLAMIC";
}

Demo: http://plnkr.co/edit/N53NcCLtKP4qC1p9G1BK?p=preview

answered Oct 26, 2014 at 12:06

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

1 Comment

CraZyDroiD Over a year ago

Thank you.your method should work .i used this same code but strangely i did not work.i dont know why

Collectives™ on Stack Overflow

ng-hide in angularjs issue

1 Answer 1

Demo: http://plnkr.co/edit/N53NcCLtKP4qC1p9G1BK?p=preview

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Demo: http://plnkr.co/edit/N53NcCLtKP4qC1p9G1BK?p=preview

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related