Geek asks and answers

How to get an element in analog of angularjs get by id in javascript?

Say I have a button:

<button type="submit"
        value="Send" 
         id="btnStoreToDB"
         class="btn btn-primary start"             
         ng-click="storeDB()"
         ng-disabled="!storeDB_button_state"
         >
                <i class="icon-white icon-share-alt"></i>
                <span>Store to DB</span>
            </button>

enter image description here

In JS, to get this button, I just do var btn = $('#btnStoreToDB');and now I can play with this button. So I can take it idor class.

But how can I get this item using angularjs?

I want to add a spinner to the button at boot time, as shown here (Fiddle) .

Since my whole project I started using angulajs, I try to do it wisely and do not like how I know.

I thought to add: ng-model="btnStoreToDB"and use this:

  if($scope.btnStoreToDB){
      var spinner = new Spinner().spin();
      $scope.btnStoreToDB.appendChild(spinner.el);
  }

but $scope.btnStartUpload- undefined. Suppose there is another way to get this button.

Please, help

+5
source share
2

.

Angular ng-show, ng-hide ng-class .

ng-class :

<button ng-class="{ useSpinner: btnStoreToDB }">...</button>

useSpinner , btnStoreToDB - true, , btnStoreToDB .

ng-show :

<button ...>
    <i class="icon-white icon-share-alt"></i>
    <span>Store to DB</span>
    <div class="spinner" ng-show="btnStoreToDb">...</div>
</button>

, Angular.

+6
angular.element("#btnStoreToDB");

< angular "

JS

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

app.controller('MainCtrl', function($scope) {
  $scope.loading = false;

  $scope.send = function(){
    $scope.loading = true;
    setTimeout(function(){
      alert('finished');
      $scope.$apply($scope.loading = false);
    }, 2000);

  };
});

HTML

<button ng-click="send()">
      <img ng-show="loading" src="http://farmville-2.com/wp-content/plugins/farmvilleajpl/img/loadingbig.gif" width='10'>
      Send!    
</button>

p.s.

p.p.s Twitter Bootstrap, . <i class="icon-spin icon-spinner" ng-show="loading"></i>

Plunker

+3
source

More articles:


All Articles