Angular: How to filter out by style?

Question

I am new to Angular, so this might seem easy. This is the HTML code:

<div>
    Has Time: <input type="checkbox" ng-model="people_filter">
</div>
<ul style="list-style: none;">
    <li ng-repeat="human in people | orderBy:'name' | filter:people_filter ">
        <a href="#!/" ng-style="set_availability(human)">
            {{human.name}}
        </a>
    </li>
</ul>

JS code:

$scope.set_availability = function(human) {
        if (the human has time) {
            return {
                    color: 'blue'
            };
        }

        return {
            color: 'red'
        };
    };

When I inspect element:

<a href="#!/" ng-style="set_availability(human)" class="ng-binding" style="color: blue;">
    John Lennon
</a>

I have a checkbox with ng-model="people_filter".

If checked, I want it to filter out people who are available.
If unchecked, I want to list all of the people.

The availability is reflected in ng-style="blue" (if yes) or ng-style="red" (if no). And it is working, I am able to see style="color:blue;" or style="color:red;".

Is there a quick fix for this?

Answer 1

I think you want to change the color of the style based on the output of the function call. Please check this out.

$availableHuman = [];
$scope.set_availability = function(human) {
            if (human.time) {                    
                availableHuman.push(human); 
                return {
             "color:"+blue+";
                };
            } 

            return {
                 "color:"+red+";
            };
        };




 <div class="list" ng-repeat="human in availableHuman">
  {{ human }}
</div>