Flash Flash - 3 months ago 10
HTML Question

How to do Multiple selection and also create a tag of selected option using angular

I wanted to create for

{{selected}}
value with a cancel button like we add Tags in Stack Overflow and in drop-down there should be a default option which will be providing all data.

So a user can select multiple option and also can delete it from from span and according to that the data should filter.

Here what I have done:



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

You need something similar to this. I've changed the filter to be used with 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;
        });
    });
};
});

See the whole code at https://jsfiddle.net/kL8sr45k/