AngularJS-如何通过q​​uerySelector获取所有元素并禁用链接

Question

I'm trying to make a simple step-by-step wizard.

HTML code for that (in index.html) looks like

<div class="stepwizard col-md-offset-3">
    <div class="stepwizard-row setup-panel">
      <div class="stepwizard-step">
        <a href="/" type="button" class="btn btn-default btn-circle" id="step-1">1</a>
        <p>Start</p>
      </div>
      <div class="stepwizard-step">
        <a href="/registration" type="button" class="btn btn-default btn-circle" disabled="disabled" id="step-2">2</a>
        <p>Registration</p>
      </div>
      <div class="stepwizard-step">
        <a href="/tutorial" type="button" class="btn btn-default btn-circle" disabled="disabled" id="step-3">3</a>
        <p>Tutorial</p>
      </div>
      <div class="stepwizard-step">
        <a href="/thank-you" type="button" class="btn btn-default btn-circle" disabled="disabled" id="step-4">4</a>
        <p>Finish</p>
      </div>
    </div>        
  </div>

Code above work fine when was triggered by jQuery which looks like function stepnext(n){

function step(n){
    if(n != 0){
        $(".stepwizard-row a").removeClass('btn-primary');
        $(".stepwizard-row a").addClass('btn-default');
        $('.stepwizard-row #step-'+n+'').removeClass('btn-default');
        $('.stepwizard-row #step-'+n+'').addClass('btn-primary');
    }
}

but I have moved it to each step controller and triggers it as

var stepReset = angular.element( document.querySelector( '.stepwizard-row a' ) );
stepReset.removeClass('btn-primary');
stepReset.addClass('btn-default');

var stepActive = angular.element( document.querySelector( '#step-1' ) );
stepActive.removeClass('btn-default');
stepActive.addClass('btn-primary');

and so on for each #step-X

It works fine for selecting on each step for btn-primary but then when I follow to next step like from 2 to 3 is not reseting class from step 2 to btn-default just taking effect on first element from .stepwizard-row a which is step#1.

My question is how I can select all DOM elements for .stepwizard-row a ?

Another question is related to have links "disabled" until landed or passed particular step. I have set them to disabled="disabled" but AngularJS let me click on them and skip steps.

Answer 1

Manually querying elements from the DOM is rarely needed in AngularJS, and in the rare cases where you need this functionality a directive is more suited.

A better way to do this is to use ngClass and add/remove the btn-default and btn-primary classes based on an expression, like so:

<a href="/" type="button" class="btn btn-circle" ng-class="{'btn-default': notCurrentStep(), 'btn-primary': currentStep()}" id="step-1">1</a>

You can then implement the notCurrentStep and currentStep functions in your controller based on your needs.

As for the disabled attribute and as @Knitesh mentioned, it's better to use ngDisabled so that you can dynamically add/remove the disabled attribute based on an expression.

Answer 2

A similar and easier approach would be :

<a href="/" type="button" class="btn btn-circle" ng-class="{'btn-default': step === 1, 'btn-primary': step !== 1 }" id="step-1">1</a>

And in your Controller:

function currentStep (step) { $scope.step = step; }