Revisions to Enable Button After Page Load in AngularJS Directive

replaced http://stackoverflow.com/ with https://stackoverflow.com/

Source Link

edited May 23, 2017 at 10:28

URL Rewriter Bot

Not sure if I'm correct but to do something after page is completely load, you can use angular.element(document).ready() (as you can see in this answeranswer).

Not sure if I'm correct but to do something after page is completely load, you can use angular.element(document).ready() (as you can see in this answer).

Just noticed that the OP is using Controller as syntax

Source Link

edited Aug 8, 2016 at 0:42

developer033

25k
8
85
113

(function() {
  'use strict';

  angular
    .module('app', [])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope'];

  function MainCtrl($scope) {
    $scopevar vm = this;
    vm.animals = [
      {
        "name":"hamster",
        "totalAnimals": 20,
        "totalAdopted": 5,
      },
      {
        "name":"turtle",
        "totalAnimals": 0,
        "totalAdopted": 0,
      },
      { 
        "name":"cat",
        "totalAnimals": 9,
        "totalAdopted": 6,
      },
      { 
        "name":"dog",
        "totalAnimals": 7,
        "totalAdopted": 2,
      },
      { 
        "name":"tiger",
        "totalAnimals": 0,
        "totalAdopted": 0,
      }
    ];
    
    $scopevm.isDisabled = true;
    
    angular.element(document).ready(function () {
      console.log('completely load!');
      $scopevm.isDisabled = false;
    });
  }
})();

<!DOCTYPE HTML>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body ng-controller="MainCtrl">controller="MainCtrl as main">
  <table class="table table-hover">
    <thead>
      <tr>
      <th>Name</th>
      <th>#of Animals Added</th>
      <th>#of Animals Adopted</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="animal in main.animals track by $index">
        <td ng-bind="animal.name"></td>
        <td ng-bind="animal.totalAnimals"></td>
        <td ng-bind="animal.totalAdopted"></td>
        <td>
          <button type="button" class="btn btn-primary" ng-disabled="!main.isDisabled || !animal.totalAnimals">Add animal</button>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

(function() {
  'use strict';

  angular
    .module('app', [])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope'];

  function MainCtrl($scope) {
    $scope.animals = [
      {
        "name":"hamster",
        "totalAnimals": 20,
        "totalAdopted": 5,
      },
      {
        "name":"turtle",
        "totalAnimals": 0,
        "totalAdopted": 0,
      },
      { 
        "name":"cat",
        "totalAnimals": 9,
        "totalAdopted": 6,
      },
      { 
        "name":"dog",
        "totalAnimals": 7,
        "totalAdopted": 2,
      },
      { 
        "name":"tiger",
        "totalAnimals": 0,
        "totalAdopted": 0,
      }
    ];
    
    $scope.isDisabled = true;
    
    angular.element(document).ready(function () {
      console.log('completely load!');
      $scope.isDisabled = false;
    });
  }
})();

<!DOCTYPE HTML>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body ng-controller="MainCtrl">
  <table class="table table-hover">
    <thead>
      <tr>
      <th>Name</th>
      <th>#of Animals Added</th>
      <th>#of Animals Adopted</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="animal in animals track by $index">
        <td ng-bind="animal.name"></td>
        <td ng-bind="animal.totalAnimals"></td>
        <td ng-bind="animal.totalAdopted"></td>
        <td>
          <button type="button" class="btn btn-primary" ng-disabled="!isDisabled || !animal.totalAnimals">Add animal</button>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

(function() {
  'use strict';

  angular
    .module('app', [])
    .controller('MainCtrl', MainCtrl);

  function MainCtrl($scope) {
    var vm = this;
    vm.animals = [
      {
        "name":"hamster",
        "totalAnimals": 20,
        "totalAdopted": 5,
      },
      {
        "name":"turtle",
        "totalAnimals": 0,
        "totalAdopted": 0,
      },
      { 
        "name":"cat",
        "totalAnimals": 9,
        "totalAdopted": 6,
      },
      { 
        "name":"dog",
        "totalAnimals": 7,
        "totalAdopted": 2,
      },
      { 
        "name":"tiger",
        "totalAnimals": 0,
        "totalAdopted": 0,
      }
    ];
    
    vm.isDisabled = true;
    
    angular.element(document).ready(function () {
      console.log('completely load!');
      vm.isDisabled = false;
    });
  }
})();

<!DOCTYPE HTML>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body ng-controller="MainCtrl as main">
  <table class="table table-hover">
    <thead>
      <tr>
      <th>Name</th>
      <th>#of Animals Added</th>
      <th>#of Animals Adopted</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="animal in main.animals track by $index">
        <td ng-bind="animal.name"></td>
        <td ng-bind="animal.totalAnimals"></td>
        <td ng-bind="animal.totalAdopted"></td>
        <td>
          <button type="button" class="btn btn-primary" ng-disabled="!main.isDisabled || !animal.totalAnimals">Add animal</button>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Source Link

answered Aug 8, 2016 at 0:37

developer033

25k
8
85
113

Not sure if I'm correct but to do something after page is completely load, you can use angular.element(document).ready() (as you can see in this answer).

So you can have a <button> structured like this:

<button type="button" class="btn btn-primary" ng-disabled="!isDisabled || !animal.totalAnimals">Add animal</button>

See the example below:

(function() {
  'use strict';

  angular
    .module('app', [])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope'];

  function MainCtrl($scope) {
    $scope.animals = [
      {
        "name":"hamster",
        "totalAnimals": 20,
        "totalAdopted": 5,
      },
      {
        "name":"turtle",
        "totalAnimals": 0,
        "totalAdopted": 0,
      },
      { 
        "name":"cat",
        "totalAnimals": 9,
        "totalAdopted": 6,
      },
      { 
        "name":"dog",
        "totalAnimals": 7,
        "totalAdopted": 2,
      },
      { 
        "name":"tiger",
        "totalAnimals": 0,
        "totalAdopted": 0,
      }
    ];
    
    $scope.isDisabled = true;
    
    angular.element(document).ready(function () {
      console.log('completely load!');
      $scope.isDisabled = false;
    });
  }
})();

<!DOCTYPE HTML>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body ng-controller="MainCtrl">
  <table class="table table-hover">
    <thead>
      <tr>
      <th>Name</th>
      <th>#of Animals Added</th>
      <th>#of Animals Adopted</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="animal in animals track by $index">
        <td ng-bind="animal.name"></td>
        <td ng-bind="animal.totalAnimals"></td>
        <td ng-bind="animal.totalAdopted"></td>
        <td>
          <button type="button" class="btn btn-primary" ng-disabled="!isDisabled || !animal.totalAnimals">Add animal</button>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

I hope it helps.

Collectives™ on Stack Overflow

Return to Answer