ng-hide in angularjs issue

时间:2014-10-26 11:28:19

标签: javascript jquery angularjs ionic-framework

如果在我的表单中选择了某个选择选项值,我想要隐藏一个字段。我使用了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;
                                   } 
                                   }

这就是我试图这样做的方法,但没有用。

1 个答案:

答案 0 :(得分:2)

你不应该使用$scope.true属性,它真的令人困惑,因为在ng-hide="true"中,Angular的解析器将其字面解释为true值始终保持为真(但是你可以使用方括号表示法使这个不幸的名字工作。

而是将您的旗帜称为hidden,并在控制器中以这种方式处理:

$scope.hidden = false;

$scope.hideFields = function() {
    $scope.hidden = $scope.user.productCat.name == "ISLAMIC";
}

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