angularjs - Angular：如何按样式过滤掉？

Question

我是 Angular 的新手，所以这似乎很容易。这是 HTML 代码：

<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代码：

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

        return {
            color: 'red'
        };
    };

当我检查元素时：

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

我有一个带有ng-model="people_filter".

如果选中，我希望它过滤掉可用的人。
如果未选中，我想列出所有的人。

可用性反映在ng-style="blue"（如果是）或ng-style="red"（如果不是）中。它正在工作，我可以看到style="color:blue;"或style="color:red;"。

有没有快速解决这个问题的方法？

Answer 1

我认为您想根据函数调用的输出更改样式的颜色。请检查一下。

$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>