如果禁用，则在 ng-repeat 上为标记文本自定义过滤器角度

Question

我想在我的 angularJS 应用程序上添加一个自定义过滤器。如果 ng-repat 中的对象将 isDeleted 标志设置为 true，我想要像 this way 这样的删除文本。
代码：这里是 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

选项 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"> 中删除过滤器

所以 final 类似于：

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

您需要更改过滤器以预期整个 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 3

尝试使用 ng 样式，例如在这个 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>