How to do the following jquery code in angularjs way

Question

I am new to angularjs and want to do the following in angularjs way

Controller

$scope.Filter = function($event, active, id) {
    html = "";
         if(active){
                    $http({method: 'GET', url: "someUrl.json"}).
                    success(function(data, status) {

                    html+="<p>Hey i am inside if block</p>";                    
                    });
    $("#results-display").html(html);

               }

  else{
         $http({method: 'GET', url: "someotherUrl.json"}).
                    success(function(data, status) {

                    html+="<p>Hey i am inside else block</p>";                  
});
 $("#results-display").html(html);
    }
}

Basically i have used angularjs controller, but i am doing the jquery way inside the controller by appending the json data to html. How do i display returned json data in angularjs way?

Answer 1

Any HTML manipulation should be omitted from controller code. If it has to be done in code, then use an Angular Directive.

But in your case directive is not required. To angularize your example you should merely set a scope property (I've named it isActive) and rather provide correct HTML display in your markup because scope model is the communication between your Javascript controller code and your HTML view.

Javascript

$scope.Filter = function($event, active, id) {
    if(active) {
        $http({
            method: 'GET',
            url: "someUrl.json"
        })
        .success(function(data, status) {
            // set $scope property
            $scope.isActive = true;
        });
    }
    else {
        $http({
            method: 'GET',
            url: "someotherUrl.json"
        })
        .success(function(data, status) {
            $scope.isActive = false;
        });
    }
};

This code can easily be made shorter and still do the same thing.

$scope.Filter = function($event, active, id) {
    $http({
        method: "GET",
        url: active ? "someUrl.json" : "someotherUrl.json"
    })
    .success(angular.bind(active, function(data, status) {
        $scope.isActive = this;
    }));
};

HTML

<div id="results-display" ng-switch="isActive">
    <p ng-switch-when="true">Hey i am inside if block</p>
    <p ng-switch-when="false">Hey i am inside else block</p>
</div>

If you don't use this div anywhere in the code, you can omit its ID attribute altogether because angular attributes will act accordingly.

More complex manipulation

In case this example is a simplified version of a more complex actual code (in case it's not just about being active or not) you can also set your text value in your controller and then bind to it in HTML. Nothing's wrong in doing this as long as values are strictly primitives and there is no HTML involved. Any other scope properties are also just primitives or objects of objects/primitives. They're all just data.

...
$scope.activityText = "Hey i am inside if block";
...

And then in HTML simply bind to this scope property

<div id="results-display">
    <p ng-bind="activityText"></p>
</div>

This means that whenever you change $scope.activityText value (be it in your .Filter function or anywhere else) it will reflect in your HTML accordingly.

You could also use a different notation using {{}} but I prefer the ng-bind attribute as it doesn't require you to also put ng-cloak on the element to prevent unusual display before Angular kicks in.