CODEWITHSUNDEEP
javascriptjqueryangularjsionic-framework
CraZyDroiD
CraZyDroiD

Reputation: 7105

ng-hide in angularjs issue

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.

Upvotes: 0

Views: 318

Answers (1)

dfsq
dfsq

Reputation: 193251

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

Upvotes: 2

Related Questions