How to show/hide buttons in AngularJs?

In AngularJs, we can show and hide the div using ng-show and ng-disabled directives. Which are given below.

ng-show directive {{ This directive is used to show the div }}
ng-disabled directive {{ This directive is used to show the div }}

The AngularJs code example

var $scope;

var app = angular.module('myapp', []);

function myControl($scope) {

}

var $scope;
var app = angular.module('myapp', []);
function myControl($scope) {
}

The live example code

<!DOCTYPE html>

<html>

<head lang="en">

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>

<script>

    var $scope;

    var app = angular.module('myapp', []);

    function myControl($scope) {

    }

</script>

</head>

<body>

    <div ng-app="myapp">

    <div ng-controller="myControl">

        First Name :  <input type="text" ng-model="fName" /><br>

        Last Name :  <input type="text" ng-model="lName" /><br>

        <button ng-disabled="!fName || !lName">Submit</button>

    </div>

</div>

</body>

</html>

<!DOCTYPE html>
<html>
<head lang="en">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script>
    var $scope;
    var app = angular.module('myapp', []);
    function myControl($scope) {
    }
</script>
</head>
<body>
    <div ng-app="myapp">
    <div ng-controller="myControl">
        First Name :  <input type="text" ng-model="fName" /><br>
        Last Name :  <input type="text" ng-model="lName" /><br>
        <button ng-disabled="!fName || !lName">Submit</button>
    </div>
</div>
</body>


</html>

Pin it

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

1 2 3 4	`var` `$scope;` `var` `app = angular.module('myapp', []);` `function` `myControl($scope) {` `}`