Angular：如何按样式过滤掉？答案

【问题标题】：Angular: How to filter out by style?Angular：如何按样式过滤掉？
【发布时间】：2017-06-09 05:35:33
【问题描述】：

我是 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;"。

是否有快速解决此问题的方法？

【问题讨论】：

你能在 plunker 中分享你的代码吗？
我已经阅读了您的问题，并尝试将其与代码关联三次。但我不明白你在问什么。请举例说明您想做什么。
请显示对象结构。
没有。我还是不明白你想达到什么目的。
试试这个ng-style="{ 'color' : (the human has time) ? 'blue : 'red' }"，但我不知道the human has time是什么意思

标签： angularjs ng-style ng-filter

【解决方案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>

【讨论】：

我已经更新了代码。我不想换颜色，只想根据它的风格过滤掉
如果这个人有时间，那么你可以把那个人推到一个数组中。这就是你要找的吗？
我想让它与 DOM 一起工作，显然，它不会。
感谢您的建议！
然后您可以使用 for 循环在 dom 中打印该值。