Search code examples
javascriptangularjsbuttonstylesvisible

Hide and Show in angularjs


I am new in angularJs .

This is my bit level view

<input type="text" ng-model="todoName" size="30"
            placeholder="Add Your Name">
        <input type="text" ng-model="todoAge" size="30"
            placeholder="Add Your Age">
        <input type="hidden" ng-model="todoId" />
        <form style="display:'?????????'" ng-submit="addTodo()">
            <input class="btn-primary" type="submit" value="add">
        </form>
         <form style="display:'?????????'" ng-submit="addTodo()">
            <input class="btn-primary" type="submit" value="update">
        </form>

and this is my angularjs bit level coding

$scope.DisplayUpdate = "none";

I have one screan for manage student details, i want to show add button when first time at this time hide update button , and when update time to show update button and at this time add button was need to hide .

see this line for set to hide and show details in script side using angular js : $scope.DisplayUpdate = "none";

How to i set this value in my button style ?

 <form style="display:'?????????'" ng-submit="addTodo()">
                <input class="btn-primary" style="display:'?????????'" type="submit" value="add">
            </form>

Solution

  • You can use ng-show to hide it

    <form ng-show="DisplayUpdate === 'none'" ng-submit="addTodo()">
        <input class="btn-primary" type="submit" value="add">
    </form>
    

    If you want to remove it from DOM tree, use ng-if

    <form ng-if="DisplayUpdate === 'none'" ng-submit="addTodo()">
        <input class="btn-primary" type="submit" value="add">
    </form>