AngularJs：根据选择值显示隐藏字段

Question

我想在Select Value的基础上显示隐藏表单字段。例如，我的表单有5个文本字段和1个选择选项字段在这些字段中，4个字段取决于选择值。如果我选择布料，则布料类型和布料值保持不变，皮革类型和皮革值隐藏。但是当我选择包皮革类型和皮革价值保持其他隐藏。我正在尝试一些条件和ng-class="{'hideCheck': isHideCheck}"模型，但它表现异常。

    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>

Answer 1

使用ng-hide隐藏元素。 ng-class用于改变css。

我更改了您的代码，当选择了valus and type选项时，它会隐藏元素checking，这只是一个示例，而不是实现您的羽毛。您想阅读https://docs.angularjs.org/api/ng/directive/ngHide。

顺便说一句，ng-repeat是做表事的好方法。

    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>