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

Question

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

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

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

.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}"> 
 
\t \t \t \t \t <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-class用于改变css。

我改变了你的代码，当选项checking被选中时，它会隐藏元素valus and type，只是你的一个例子，不实现你的羽毛。你想阅读https://docs.angularjs.org/api/ng/directive/ngHide。顺便说一句，ng-repeat是一个很好的方法来做表事物。

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

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

.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'"> 
 
\t \t \t \t \t <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>