javascript - ng-hide 在 angularjs 问题中

Question

如果在我的表单中选择了选择选项的某个值，我想隐藏一个字段。我使用了 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 个选项:常规和伊斯兰。如果我使用 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;
                                   } 
                                   }

我尝试这样做，但没有成功。

Answer 1

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

而是将您的标志称为“隐藏”，并在 Controller 中以这种方式处理它:

$scope.hidden = false;

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

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