AngularJS - Hide a form when a select option value equals specific value

Question

Please help implement such functionality. If option value == 1, hide the form below.

<select ng-model="selection">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
<select>

<form ng-hide="isHidden"> <!-- Form to be hidden when option value == 1 -->
   <!-- Some html code here... -->
</form>

Here's a part of the controller.

$scope.isHidden = true;

if($scope.selection == '1'){
    $scope.isHidden = false;
}

The current code is not working. Please help me to implement this. Thanks.

James Allardice · Accepted Answer · 2013-06-21 07:30:28Z

3

You could just refer to the selection in the ng-hide directive:

<form ng-hide="selection == '1'">
   <!-- Some html code here... -->
</form>

Here's a working example.

answered Jun 21, 2013 at 7:30

James Allardice

166k22 gold badges335 silver badges315 bronze badges

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

1 Comment

sharic19 Over a year ago

I see. So that's how it works. Thanks a lot. Just started in exploring AngularJS. :)

Ufuk Hacıoğulları · Accepted Answer · 2013-06-21 07:30:10Z

1

You can add a watch to selection property:

$scope.$watch('selection',function(newValue){
    $scope.isHidden = newValue != '1';
});

answered Jun 21, 2013 at 7:30

Ufuk Hacıoğulları

38.6k14 gold badges120 silver badges157 bronze badges

Comments

Jani Hyytiäinen · Accepted Answer · 2013-06-21 08:14:52Z

You should handle the change event and put all of your logic to your JavaScript files. This not only separates your concerns but also makes it easier to debug. You could use $scope.$watch and handle the whole thing unobtrusively in controller, but since your logic is going to manipulate ui, it's better to have some hint in the ui ng-change for some other programmers of the logic. This would prevent situations like "where did the form go?" followed by an hour of searching the logic.

HTML:

<form name="myForm">
    <select ng-model="selection" ng-change="handleSelectionChange()">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    <select>
</form>

Controller:

$scope.handleSelectionChange = function(){
    if($scope.selection=='1'){
        document.myForm.style.display = 'none';
    }
};`

I cannot verify the functionality of the code on my mobile, so until I can, let this work as an idea of an approach. I will test the code as soon as I get to my desktop.

Collectives™ on Stack Overflow

AngularJS - Hide a form when a select option value equals specific value

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related