CODEWITHSUNDEEP
angularjs
Joe82
Joe82

Reputation: 1251

Filtering with tags in Angular

I have built a filter with angular binding checkboxes to my scope with ng-model, following this example Angularjs filtering with checkboxes

The filter is working fine, but I would like to display a tag with each filter that is ticked. For that, I tried to make a ng-repeat over the scope where all the filtering is done, but I am not able to display the proper text.

My markup is like this:

<div ng-app="myApp" ng-controller="Ctrl">
{{ctrlTest}}<hr/>
<div ng-repeat="elements in filter">
    <div ng-repeat="n in elements">
        <li ng-repeat="x in n" ng-show="n=true">{{n}}
             <a ng-click="n=false"> X</a>
        </li>
    </div>
</div>
</div>

angular.module('myApp', [])
.controller('Ctrl', function($scope) {
    $scope.ctrlTest = "Filters";
        $scope.filter = [{"producers":  {"Ford":true,"Honda":true,"Ferrari":true}}]
});

When the filtering is done, the data displayed is the one showed in $scope.filter My problem is that I cannot get to display properly the data (the desired output would be three labels, each one showing each name: Ford, Honda and Ferrari). I would also like to be able to remove the label by clicking in an X next to it.

Here is a jsfiddle of what I have been trying to do so far: http://jsfiddle.net/Joe82/wjz8270z/2/

Thanks in advance!

Upvotes: 0

Views: 1417

Answers (1)

sjokkogutten
sjokkogutten

Reputation: 2095

This works. Note that I needed to make some changes to your JSON. Updated your JSFiddle.

<div ng-app="myApp" ng-controller="Ctrl">
    {{ctrlTest}}<hr/>
    <div >
        <div ng-repeat="n in filter.producers">        
            <li ng-show="n.checked==true"><a ng-click="remove(n)">{{n.Brand}} X</a>
            </li>
        </div>
    </div>
</div>

angular.module('myApp', [])
    .controller('Ctrl', function($scope) {
        $scope.ctrlTest = "Filters";
            $scope.filter = {
              "producers": [
                {
                 "Brand": "Ford",
                 "checked": true
                },
                {
                 "Brand": "Honda",
                 "checked": true
                },
                {
                 "Brand": "Ferrari",
                 "checked": true
                }]
         };

    $scope.remove = function(producer){
      producer.checked = false;
      console.log(producer);
    }    
});

Upvotes: 1

Related Questions