AngularJs : Show Hide Fields According Select Value

Question

I want to show hide form fields on the basis of Select Value. e.g my form has 5 text fields and 1 select option field In those fields 4 fields are depended on select value. if i select cloth then cloth type and cloth value remains, lether type and lether value hide. but when i select Bags lether type and lether value remain else hide. i am trying some condition and ng-class="{'hideCheck': isHideCheck}" model but it behaving abnormally.

    var app = angular.module('mainApp', []);

	app.controller('appCont', function($scope) { 
	
			$scope.ProductTypeChnaged = function () {
            $scope.ProductStatus = $scope.ProductValue;
			
			if ($scope.AccountStatus == 'checking') {
					$scope.isHideCheck = !$scope.isHideCheck;
				} else if ($scope.AccountStatus == 'saving'){
					$scope.isHideSave = !$scope.isHideSave;
					}
        };
	
	});

.hideCheck{display:none}
.hideSave{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="appCont">
<p>Product box status: {{ ProductStatus }}</p>
<form name="frm">  
            <table>  
                <tr>  
                    <td>Account Type   :  
  
                    </td>  
                    <td>  
                        <select name="ProductType" ng-model="ProductValue" ng-change="ProductTypeChnaged()">
                        <option value="checking">Checking</option>
                        <option value="saving">Saving</option>
                        </select><br />  
                    </td>  
                </tr>  
                <tr>  
                    <td>Amount   :  
  
                    </td>  
                    <td>  
                        <input type="text" name="amount" ng-model="amount" required>  
                    </td>  
                </tr>  
                <tr ng-class="{'hideCheck': isHideCheck}">  
					<td>Lether value   :  
  
                    </td>  
                    <td>  
                        <input type="text" name="Lethervalue" ng-model="Lethervalue">  
                    </td>  
                </tr>
                  
                  <tr ng-class="{'hideCheck': isHideCheck}">
                    <td>Lether Type   :  
  
                    </td>  
                    <td>  
                        <input type="text" name="LetherType" ng-model="LetherType">  
                    </td>  
                </tr>
                  <tr ng-class="{'hideSave': isHideSave}">
                    <td>Cloth Type   :  
  
                    </td>  
                    <td>  
                        <input type="text" name="ClothType" ng-model="ClothType">  
                    </td>  
                </tr>
               <tr ng-class="{'hideSave': isHideSave}"> 
                    <td>Cloth value   :  
  
                    </td>  
                    <td>  
                        <input type="text" name="Clothvalue" ng-model="Clothvalue">  
                    </td>  
                </tr>
                <tr>  
                    <td colspan="2" align="right">  
  
                        <button ng-click="addProduct()" ng-disabled="frm.$invalid">Add Account</button>  
                    </td>  
  
                </tr>  
            </table>  
        </form>
</div>

Fujiao Liu · Accepted Answer · 2016-09-25 15:54:29Z

use ng-hide to hide the element. ng-class is used to alter css.

I changed your code, it will hide element valus and type when option checking is selected, just an example for you, not implement your feather. you would like to read https://docs.angularjs.org/api/ng/directive/ngHide.

by the way , ng-repeat is a good way to do table things.

    var app = angular.module('mainApp', []);

	app.controller('appCont', function($scope) { 
	
			$scope.ProductTypeChnaged = function () {
            $scope.ProductStatus = $scope.ProductValue;
			
			if ($scope.AccountStatus == 'checking') {
					$scope.isHideCheck = !$scope.isHideCheck;
                    
				} else if ($scope.AccountStatus == 'saving'){
					$scope.isHideSave = !$scope.isHideSave;
                   
					}
        };
	
	});

.hideCheck{display:none}
.hideSave{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="appCont">
<p>Product box status: {{ ProductStatus }}</p>
<form name="frm">  
            <table>  
                <tr>  
                    <td>Account Type   :  
  
                    </td>  
                    <td>  
                        <select name="ProductType" ng-model="ProductValue" ng-change="ProductTypeChnaged()">
                        <option value="checking">Checking</option>
                        <option value="saving">Saving</option>
                        </select><br />  
                    </td>  
                </tr>  
                <tr>  
                    <td>Amount   :  
  
                    </td>  
                    <td>  
                        <input type="text" name="amount" ng-model="amount" required>  
                    </td>  
                </tr>  
                <tr ng-hide="ProductStatus == 'checking'">  
					<td>Lether value   :  
  
                    </td>  
                    <td>  
                        <input type="text" name="Lethervalue" ng-model="Lethervalue">  
                    </td>  
                </tr>
                  
                  <tr ng-hide="ProductStatus == 'checking'">
                    <td>Lether Type   :  
  
                    </td>  
                    <td>  
                        <input type="text" name="LetherType" ng-model="LetherType">  
                    </td>  
                </tr>
                  <tr ng-hide="ProductStatus == 'checking'">
                    <td>Cloth Type   :  
  
                    </td>  
                    <td>  
                        <input type="text" name="ClothType" ng-model="ClothType">  
                    </td>  
                </tr>
               <tr ng-hide="ProductStatus == 'checking'"> 
                    <td>Cloth value   :  
  
                    </td>  
                    <td>  
                        <input type="text" name="Clothvalue" ng-model="Clothvalue">  
                    </td>  
                </tr>
                <tr>  
                    <td colspan="2" align="right">  
  
                        <button ng-click="addProduct()" ng-disabled="frm.$invalid">Add Account</button>  
                    </td>  
  
                </tr>  
            </table>  
        </form>
</div>

Thank you for this and further guidance actually i am new in angularJs. thanks again. :-D

Collectives™ on Stack Overflow

AngularJs : Show Hide Fields According Select Value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related