Angular.js中ng-hide属性的动态处理

时间:2017-09-21 10:29:06

标签: angularjs

我是Angular.js的新手。我正在测试ng-hide属性的动态填充。选择false应该使文本可见。但它不起作用。请帮忙!

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<p>Select an Option</p>
<select ng-model="selectedVal" ng-options="x for x in option" >

</select>
<p  ng-hide= "{{selectedVal}}" >I am  visible.</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.option = ["True", "False"];
});
</script> 

</body>
</html>

1 个答案:

答案 0 :(得分:3)

使用ng-hide= "selectedVal"而非ng-hide= "{{selectedVal}}",您无需使用{{}}进行插值。同时将字符串数组["True", "False"]更改为布尔值[true,false]

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<p>Select an Option</p>
<select ng-model="selectedVal" ng-options="x for x in option" >

</select>
<p  ng-hide= "selectedVal" >I am  visible.</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.option = [true, false];
});
</script> 

</body>
</html>

相关问题