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>