Dynamic handling of ng-hide attribute in Angular.js

Question

I am new to Angular.js. I am testing dynamic population of ng-hide attribute. Selecting false should make the text visible. But it's not working. Please help!

<!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>

Vivz · Accepted Answer · 2017-09-21 10:35:10Z

3

Use ng-hide= "selectedVal", not ng-hide= "{{selectedVal}}", you don't need to interpolate it with {{}}. Also change your array of strings ["True", "False"] to boolean [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>

edited Sep 21, 2017 at 10:35

answered Sep 21, 2017 at 10:30

Vivz

6,6282 gold badges19 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic handling of ng-hide attribute in Angular.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related