Question

我想在我的angularJS应用上添加自定义过滤器。如果ng-repat中的对象将isDeleted标志设置为true，我希望di strike文本像这样。
代码：这里是HTML：

<table id="tableText" class="table table-hover table-striped" ng-init="allNews()">
                <tr>
                    <th>Titolo</th>
                    <th>Text</th>
                    <th>Disattivato</th>
                    <th>Modifica</th>
                    <th ng-if="!cancelDelete">Elimina</th>
                    <th ng-if="cancelDelete">Annulla</th>
                </tr>

                <tr ng-repeat="news in allNews | filter: deleteTitleText(news)">
                    <td>
                        <div ng-hide="editingData[news.id]">{{ news.title }}</div>
                        <div ng-show="editingData[news.id]"><input type="text" class="form-control" ng-model="news.title" /></div>
                    </td>

                    <td>
                        <div ng-hide="editingData[news.id]">{{ news.arg }}</div>
                        <div ng-show="editingData[news.id]"><input type="text" class="form-control" ng-model="news.arg" /></div>
                    </td>

                    <td>
                        <div ng-hide="editingData[news.id]"><input type="checkbox" disabled ng-model="news.isDeleted"></div>
                        <div ng-show="editingData[news.id]"><input type="checkbox" ng-model="news.isDeleted"></div>
                    </td>

                    <td>
                        <div ng-hide="editingData[news.id]"><button id="modify" class="btn btn-primary" ng-click="modify(news, $event)">Modifica</button></div>
                        <div ng-show="editingData[news.id]"><button id="accept" class="btn btn-success" ng-click="update(news)">Accetta</button></div>
                    </td>

                    <td>
                        <div ng-hide="editingData[news.id]"><button id="delete" class="btn btn-danger" ng-click="delete(news.id)">Cancella</button></div>
                        <div ng-show="editingData[news.id]"><button id="cancel" class="btn btn-danger" ng-click="cancelModify()">Annulla</button></div>
                    </td>
                </tr>
            </table>

JS：

app.filter('deleteTitleText', function () {
return function (news) {
    if (news.isDeleted == true) {
        news.title = "<span><del>" + news.title + "</del></span>";
        news.arg = "<span><del>" + news.arg + "</del></span>";
    }
    return news;
}
});

这是实现这种过滤器的好方法吗？现在我收到此错误：angular.js:13920 Error: [filter:notarray] Expected array but received: function ()。感谢

Answer 1

您需要更改过滤器以期望整个allNews数组/对象并使用它而不是列表中的单个项目。

This might help。

例如：

app.filter('deleteTitleText', function () {
    return function (allNews) {
        var filtered = [];
        angular.forEach(allNews, function(news) {
            if (news.isDeleted == true) {
                news.title = "<span><del>" + news.title + "</del></span>";
                news.arg = "<span><del>" + news.arg + "</del></span>";
            }
            filtered.push(news);
        });
        return filtered;
    }
});

您的ng-repeat应改为：

ng-repeat="news in allNews | filter: deleteTitleText(news)"

致：

ng-repeat="news in allNews | deleteTitleText"

Answer 2

选项1：

<table id="tableText" class="table table-hover table-striped" ng-init="allNews()">
    <tr>
        <th>Titolo</th>
        <th>Text</th>
        <th>Disattivato</th>
        <th>Modifica</th>
        <th ng-if="!cancelDelete">Elimina</th>
        <th ng-if="cancelDelete">Annulla</th>
    </tr>

    <tr ng-repeat="news in allNews">
        <td>
            <div ng-hide="editingData[news.id]">
                <span ng-hide="news.isDeleted">{{ news.title }}</span>
                <span ng-show="news.isDeleted"><del>{{ news.title }}</del></span>
                <!-- USING ng-if -->
                <!--
                <span ng-if="!news.isDeleted">{{ news.title }}</span>
                <span ng-if="news.isDeleted"><del>{{ news.title }}</del></span>
                -->
            </div>
            <div ng-show="editingData[news.id]"><input type="text" class="form-control" ng-model="news.title" /></div>
        </td>

        <td>
            <div ng-hide="editingData[news.id]">
                <span ng-hide="news.isDeleted">{{ news.arg }}</span>
                <span ng-show="news.isDeleted"><del>{{ news.arg }}</del></span>
                <!-- USING ng-if -->
                <!--
                <span ng-if="!news.isDeleted">{{ news.arg }}</span>
                <span ng-if="news.isDeleted"><del>{{ news.arg }}</del></span>
                -->
            </div>
            <div ng-show="editingData[news.id]"><input type="text" class="form-control" ng-model="news.arg" /></div>
        </td>

        <td>
            <div ng-hide="editingData[news.id]"><input type="checkbox" disabled ng-model="news.isDeleted"></div>
            <div ng-show="editingData[news.id]"><input type="checkbox" ng-model="news.isDeleted"></div>
        </td>

        <td>
            <div ng-hide="editingData[news.id]"><button id="modify" class="btn btn-primary" ng-click="modify(news, $event)">Modifica</button></div>
            <div ng-show="editingData[news.id]"><button id="accept" class="btn btn-success" ng-click="update(news)">Accetta</button></div>
        </td>

        <td>
            <div ng-hide="editingData[news.id]"><button id="delete" class="btn btn-danger" ng-click="delete(news.id)">Cancella</button></div>
            <div ng-show="editingData[news.id]"><button id="cancel" class="btn btn-danger" ng-click="cancelModify()">Annulla</button></div>
        </td>
    </tr>
</table>

选项2：

<span ng-bind-html="news | deleteTitleText"></span>

app.filter('deleteTitleText', function ($sce) {
    return function (input) {
        if(input.isDeleted) {
            output = $sce.trustAsHtml("<del>"+input.title+"</del>");
        } else {
            output = $sce.trustAsHtml("<span>"+input.title+"</span>");
        }
        return output;
    };
});

从ng-repeat <tr ng-repeat="news in allNews">

中删除过滤器

所以最终类似于：

<tr ng-repeat="news in allNews">
    <td>
        <div ng-hide="editingData[news.id]">
            <span ng-bind-html="news | deleteTitleText"></span>
        </div>
        <div ng-show="editingData[news.id]"><input type="text" class="form-control" ng-model="news.title" /></div>
    </td>
    ....
    ....

希望这有帮助

Answer 3

尝试使用ng-style，就像在这个plunker中一样：https://plnkr.co/edit/0koMSQ54gUChdpB4Vrrm?p=preview

!item.isDisabled ? {'text-decoration': 'line-through'} : {'text-decoration': 'none'}

Answer 4

您只需使用ng-show和ng-hide

即可

<tr ng-repeat="news in allNews">
    <span ng-show="news.isDeleted"><del>{{news.title}}</del></span>
    <span ng-show="news.isDeleted"><del>{{news.arg}}</del></span>
    <span ng-hide="news.isDeleted"><del>{{news.title}}</del></span>
    <span ng-hide="news.isDeleted"><del>{{news.arg}}</del></span>
    .
    .
    .
</tr>

如果禁用，则自动过滤器对ng-repeat进行角度调整

4 个答案: