如何进行多项选择并使用角度创建选定选项的标签

Question

我想使用取消按钮为{{selected}} 创建值，就像我们在 Stack Overflow 中添加标签一样，在下拉菜单中应该有一个默认选项，它将提供所有数据。

因此用户可以选择多个选项，也可以从跨度中删除它，并根据数据过滤。

这是我所做的：

var myapp = angular.module('mainApp', []);

myapp.filter('findobj', function () {
    return function (dataobj, selected) {
        if (!selected) return dataobj;
        return dataobj.filter(function (news) {
            
            return news.CategoryList.some(function (category) {
                return category.DisplayName === selected;
            });
        });
    };
});

myapp.controller('mainController', function ($scope, $http, $filter, $sce) {
    $scope.$sce = $sce;
    var news = [{
        "NewsList": [{
            "CategoryList": [{
                "CategoryName": "PressStatements",
                    "DisplayName": "Press Statements",
                    "ID": 9
            }, {
                "CategoryName": "Reports",
                    "DisplayName": "Reports",
                    "ID": 10
            }],
                "Link": "\/news-container\/news-page-2\/",
                "MainHeading": "News 2",
                "PageID": 23,
                "PageTypeIndicator": "NewsArticle",
                "PageTypeName": "News Page 2",
                "PageViewCount": "20",
                "Preamble": null,
                "PublishDate": "\/Date(1435842382000+0000)\/"
        }, {
            "CategoryList": [{
                "CategoryName": "InvestorRelations",
                    "DisplayName": "Investor Relations",
                    "ID": 6
            }],
                "Link": "\/news-container\/news-article\/",
                "MainHeading": "Heading",
                "PageID": 20,
                "PageTypeIndicator": "NewsArticle",
                "PageTypeName": "News Article",
                "PageViewCount": "20",
                "Preamble": {
                "_unparsedString": "<p>Intro&nbsp;<\/p>"
            },
                "PublishDate": "\/Date(1435837792000+0000)\/"
        }, {
            "CategoryList": [{
                "CategoryName": "Career",
                    "DisplayName": "Career",
                    "ID": 2
            }, {
                "CategoryName": "Markets",
                    "DisplayName": "Markets",
                    "ID": 8
            }],
                "Link": "\/blog-post\/",
                "MainHeading": "Blog Heading",
                "PageID": 18,
                "PageTypeIndicator": "Blog",
                "PageTypeName": "Blog Post",
                "PageViewCount": "20",
                "Preamble": {
                "_unparsedString": "<p>test<\/p>"
            },
                "PublishDate": "\/Date(1435757849000+0000)\/"
        }],
            "RelatedNews": null
    }];
    $scope.data = news;
    $scope.filterItems = function (g) {
        //console.log('filterItems is run');
        var ret = $filter('filter')(g.NewsList, "");
        //g.filteredItemCount = ret.length
        return ret
    };


    $scope.abms = [];
    angular.forEach(news[0].NewsList, function (newsItems, index) {
        angular.forEach(newsItems.CategoryList, function (category, index) {
            $scope.abms.push(category.DisplayName);
        });
    });



});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp">
    <div ng-controller="mainController">
        <div ng-repeat="d in data">
            Search: <input ng-model="query" type="text" />
        
            <select ng-model="selected" ng-options="item1 for  item1 in abms"></select>
            {{selected}}
            <div  ng-repeat="item1 in filterItems(d) | findobj : selected | filter:query ">
                <div>Goto {{$index+1}} :<a ng-href="#">{{item1.Link}}</a> 
                </div>
                <div>MainHeading {{$index+1}} : {{item1.MainHeading}}</div>
                <div>PageID {{$index+1}} : {{item1.PageID}}</div>
                <div>PageTypeIndicator {{$index+1}} : {{item1.PageTypeIndicator}}</div>
                <div>PageTypeName {{$index+1}} : {{item1.PageTypeName}}</div>
                <div>PageViewCount {{$index+1}} : {{item1.PageViewCount}}</div>
                <div>Preamble {{$index+1}} : <span ng-bind-html="$sce.trustAsHtml(item1.Preamble._unparsedString)"></span></div>
                <div>PublishDate {{$index+1}} : {{item1.PublishDate }}</div>
            </div>
        </div>
    </div>

Answer 1

你需要类似的东西。我已经更改了要与 taginput 一起使用的过滤器：

myapp.filter('findobj', function () {
return function (dataobj, selected) {
    if (selected === undefined)
        return dataobj;
    else if(selected.length === 0)
        return dataobj;

    return dataobj.filter(function (news) {

        var tofilter= [];
        angular.forEach(selected,function(v,i){ tofilter.push(v.text) });

        return news.CategoryList.some(function (category) {
            return tofilter.indexOf(category.DisplayName)>-1;
        });
    });
};
});

在https://jsfiddle.net/kL8sr45k/查看完整代码

Answer 2

我叉你小提琴https://jsfiddle.net/4yvk7uqx/

• 在 ng-change 的帮助下，它使用一个数组来填充选定的选项。 ng-change="selectedOptions.push(selected)"
• 这些选项会在 ng-click 时从该数组中移除。 ng-click="selectedOptions.splice(selectedOptions.indexOf(option), 1)"

它不漂亮，价值观也不是唯一的，但我希望你能从这里继续……