如果在表单中选择了select选项的某个值,我想隐藏一个字段。我使用了ng隐藏,但无法得到我想要的。最初应该显示字段,当我从另一个字段中选择某个值时,我想隐藏的字段应该被隐藏。
我的代码(表单)
<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>
对于我选择的领域,我给出了两个选项,即将军和伊斯兰。如果我使用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;
}
}
这就是我试图做到的,但没有成功。
您不应该使用$scope.true
属性,这真的很令人困惑,因为在ng-hide="true"
中,Angular的解析器将其字面解释为true
值,该值始终为true(但是,即使使用方括号表示法使用这个不幸的名称,也可以使其工作)。
相反,将您的标志称为hidden
,并在控制器中以这种方式处理:
$scope.hidden = false;
$scope.hideFields = function() {
$scope.hidden = $scope.user.productCat.name == "ISLAMIC";
}