Attach class to DOM element (DOM Manipulation)


#1

Hi all,

I am new to Ionic and Angular JS. I read that there is a golden rule not to do DOM Manipulation with Angular. Now I have this problem that I could solve in jQuery but I am not sure how solve this in Angular…

In my template I am using a ng-repeat loop:

      <ion-item ng-repeat="(k,v) in frage.antworten" ng-click="check({{frageId}},'{{k}}')" ng-key="{{k}}">
        <span>{{v}}</span>
      </ion-item>

For each element in the loop I am using ng-click to call a function in my controller, the function is like this:

$scope.check = function(frageId, antwort) {
// After the user has clicked on an item I want to check if 'antwort' for that item is 'a', and if so, attach a '.correct' class to that element
};

I am not sure about 2 things:

  1. If the ‘antwort’ is ‘a’ how can I attach a class (".correct") to this element?
  2. Is there something like $(this) as for the element that was clicked?
  3. After I have attached a class, I want to wait 3 seconds and redirect to another another Route. Is it possible?

Many thanks :wink:

Mike


#2
<ion-item ng-repeat="(k,v) in frage.antworten" ng-click="check({{frageId}},'{{k}}')" ng-key="{{k}}" ng-class="{correct: (isQuestionAnsweredCorrectly(k, v))}">
        <span>{{v}}</span>
      </ion-item>

Read up to ng-class, which is bascially a conditional assignment of a class https://docs.angularjs.org/api/ng/directive/ngClass

var questionsAnswered = {}; //Object we keep to check which answers have been given
$scope.isQuestionAnswered = function (questionId, answer) {
   var givenAnswer = null;
   if( questionsAnswered.hasOwnProperty(questionId) ) ) {
     givenAnswer = questionsAnswered[questionId];
   }
   var question = QuestionList[questionId];//Implement this yourself, I don't know the name of your object of questions
   if( question.antwort == givenAnswer && question.atwort == answer ) { //Is the question answered correctly? And is the answer the answer we are checking now?
       return true;
    } else {
       return false; //Answer is not the one we are processing or is not answered correctly
    }
  return false; //Should never happen, but to be sure we just added it.
}

$scope.check = function(frageId, antwort) {
   questionsAnswered[frageId] = antwort; //Set given answer
   $timeout( function(){
        //move to new routepath here
       alert('You would be moved to your new Route now!');
   }, 3000 );
};

Don’t forget to add the $timeout to your controller params

I’ve left the implementation a bit obvious, if you want to create the same for a “wrong” class this is not made to do this the easy way :stuck_out_tongue: But I’m sure you can figure it out based on this example.

I have not tried the code I just wrote, but it should at least give you some directions, I think it’ll work though :smile:

Basically, don’t change the dom, just change your elements or function inputs. Angular will change the dom for you because of it’s handling of the scope. Changes to your data will automagically reflect in the dom.


#3

Hey iwantwin,

Wow thanks for the reply! I haven’t tried it out yet, but I will give it a shot! I think I understand ng-class better now, also I think I more get behind the logic of Angular.

So thanks for you answer - I’ll let you know how it works :smile:

Many thanks!

Mike