ng隐藏在angularjs问题中
ng-hide in angularjs issue
如果在表单中选择了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
相关文章:
- AngularJs避免范围界定问题
- AngularJS依赖注入定时问题
- AngularJS$作用域在选项卡集中出现问题
- AngularJS指令范围约束问题重复出现
- AngularJs基于角色的菜单显示安全问题
- jquery fancybox+angularJS:fancybox按钮动作问题
- 关于复杂JSON解析(angularjs和javascript)的问题
- AngularJS Dropdown出现问题
- 访问angularjs中的数据时出现问题
- 使用AngularJS UI路由器时出现元素绑定问题
- Angularjs中$location的问题
- AngularJS复选框通过$event.target更改问题
- 在 AngularJS 中显示信息的标记存在问题
- 解决从 1.0.5 升级到 angularjs 1.3 时出现的问题
- 加载视图以查看问题 - AngularJS + ui.router
- 问题 - AngularJS 未捕获错误: [$injector:模块rr]
- 异步加载数据问题 AngularJS 和 Firebase
- ui问题.angularjs中的路由器
- Eclipse中的跨源问题AngularJS's指令
- Highcharts系列格式问题(AngularJs)