如果在我的表单中选择了某个选择选项值,我想要隐藏一个字段。我使用了ng-hide但是得不到我想要的。最初该字段应该显示,当我从另一个字段中选择某个值时,我想要隐藏的字段应该被隐藏。
我的代码(表格)
<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>
在我的选择字段中,我提供了2个选项,如General和ISLAMIC。如果我使用ISLAMIC,我的下一个字段应该被隐藏。
我的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;
}
}
这就是我试图这样做的方法,但没有用。
答案 0 :(得分:2)
你不应该使用$scope.true
属性,它真的令人困惑,因为在ng-hide="true"
中,Angular的解析器将其字面解释为true
值始终保持为真(但是你可以使用方括号表示法使这个不幸的名字工作。
而是将您的旗帜称为hidden
,并在控制器中以这种方式处理:
$scope.hidden = false;
$scope.hideFields = function() {
$scope.hidden = $scope.user.productCat.name == "ISLAMIC";
}