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>

Angular：如何按样式过滤掉？

1 个答案: