ng隐藏在angularjs问题中

ng-hide in angularjs issue

本文关键字:问题 angularjs 隐藏 ng      更新时间:2023-09-26

如果在表单中选择了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";
}

演示:http://plnkr.co/edit/N53NcCLtKP4qC1p9G1BK?p=preview