2017-09-21 13 views
2

Angular.jsを初めて使用しています。私はng-hide属性の動的な人口をテストしています。 falseを選択すると、テキストが表示されます。しかし、それは動作していません。助けてください!Angular.jsのng-hide属性の動的処理

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

答えて

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>