0

I have a main html page in which I have an anchor tag (looks like a button explained below), a drop down with some values and a check box. Code is given below.

  1. I have an anchor tag that makes it look like a button because it has a few CSS classes assigned to it. Classes are:

blue --> makes it into a blue btn inactive btn --> makes it an inactive btn

Classes are working fine.

  1. I have a check box and

  2. A Drop down with some values

The code for all the three are below:

Button Code (Actually an anchor)

<a id="submit-btn" class="inactive blue">
  <span>Submit</span>
</a>

Check Box

<input ng-click="enableButton($event)" type="checkbox"/>

Drop down

<select id="drop-dwn">
    <option> ....... some values
</select>

Aim: My objective is to remove the inactive class from the button if both the checkbox is checked and also a value is

selected from the dropdown. So currently what I am doing is I have a controller for this main html page which has the

function enableButton($event) associated to the checkbox. It contains the logic for adding and removing the CSS (currently I have not added the logic for taking care of the drop down) on the button. I do know that such DOM manipulations should not be done in the controller and hence wanted a solution on where to add this logic. I have read many tutorials but still cannot figure out the perfect way of doing it in angular. Do I need a customer directive or should it be done in a different way.

Controller Code:

allControllers.controller('SubmitBtnController', 
    ['$scope', function($scope) {

    $scope.enableButton = function($event) {

        var checkbox = $event.target;

        if (checkbox.checked) {
            angular.element(document.querySelector("#submit-btn")).
                removeClass("inactive").addClass("blue");
        }
        else if (!checkbox.checked) {
            angular.element(document.querySelector("#submit-btn")).
                removeClass("blue").addClass("inactive");   
        }
    }
}]);

The Controller is tied to the main app.

Please help.

user3626602
  • 143
  • 2
  • 2
  • 8

1 Answers1

1

You are looking at things all wrong , you are thinking of the DOM first whereas in angular you want to think about scope models first and let angular take care of changing the DOM based on your scope models

First off bind your form controls to model in scope using ng-model

<input ng-model="formControl.myInput" type="checkbox"/>
 <select ng-model="formControl.mySelect" ng-options ="..."></select>

if the object formControl doesn't exist in scope, angular will automatically create it for you. You can name it whatever you want.

Now you have 2 way data binding between the element values and the scope. If you set the value in scope it will show in DOM and vice-versa

This allows you now to use ng-class for your button. 

<a  class="somePermaClassNotDependentOnScope" 
    ng-class="{ 'inactive': !formControl.myInput, 'blue' : formControl.mySelect ==='blue'}" >
    Anchor text</a>

ng-class will evaluate expressions and update in real time as any of the model values change.

You should definitely read: "Thinking in AngularJS" if I have a jQuery background?

Community
  • 1
  • 1
charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • Thanks alot for this. What I understand from this is having ng-models to my select and checkbox and using them in the ng-class expression for the anchor button. In my expression I am able to validate either of the checkbox or the drop down, however I am unable to consider both of them in a expression. Please help me with this. – user3626602 Jul 13 '14 at 16:13
  • Can use operators like `&&` or `||`. Create a simple demo in plnkr.co or jsfiddle.net – charlietfl Jul 13 '14 at 16:16
  • Thank you so much ! I have been trying with && as well as ||, however took me a while to figure out the right expression. Thanks ! – user3626602 Jul 14 '14 at 03:31
  • This adds extra watchers which may not be ideal for simpler solutions. – Le-roy Staines Nov 30 '15 at 21:50