CODEWITHSUNDEEP
angularjsangular-materialmd-chip
1991macl
1991macl

Reputation: 27

mdChips with filter

I'm a Newbie to AngularJS trying something with Angular Material and need some ideas / help.

I have icons of Font Awesome which are displayed with ng-repeat:

<ul ng-repeat="item in items">
  <i ng-class="{'test': item.active}" class="fa fa-{{item.name}}">{{item.name}}</i>
</ul>

Below I have a list of the icons a with checkboxes:

<span ng-repeat="item in items | filter: item.active = false">
  <input type="checkbox" ng-model="item.active"> {{item.name}}<br>
</span>

If a checkbox is activated, the list entry should disappear from the list. This works with the filter of the property item.active

Now I want to display the activated items above the list with md-chips (Angular Material Chips).

So if a list item is activated, the element should be a md chip above the list (not displayed in the list anymore).

If I click on the 'X' in md-chip, only the state of the property item.active should change again to false.

I have my working files on Plunker, so my current working state can be read: https://plnkr.co/edit/t3Xpp2AKEJHXBWhkLUYZ?p=preview

Does anybody got an idea how can I implement this?

Upvotes: 2

Views: 3100

Answers (2)

Ben
Ben

Reputation: 1

You may want to filter the chips array using the builtin filterFilter function. The watcher that contains the latter will invoke the listener whenever the filterText changes.

...
$scope.array = [
    "active directory",
    "outlook",
    "edrm",
    "gcdocs",
    "novell",
    "iPrint",
    "iManager",
    "sigma",
    "bitlocker",
];

$scope.filterText = "";

$scope.$watch('filterText', function(newValue, oldValue) {
    $scope.filteredArray = filterFilter($scope.array, $scope.filterText);
}, false);
...

The following markup will render and filter the chipset.

<md-content flex class="md-padding">
  <label>Filter: <input ng-model="searchText"></label>
  <md-chips ng-model="filteredArray" readonly="ctrl.readonly"
    md-removable="removable" placeholder="Enter an issue...">
    <md-chip-template>
      <strong>{{$chip}}</strong>
    </md-chip-template>
  </md-chips>
</md-content>

For further information on filters please see https://docs.angularjs.org/guide/filter

For further information on $watch please see https://docs.angularjs.org/api/ng/type/$rootScope.Scope

Upvotes: 0

MaKCbIMKo
MaKCbIMKo

Reputation: 2820

The easiest way to do that is apply ng-click to your md-chip item and by this click it will set active = false:

...
<md-chips class="custom-chips" ng-model="items | filter: {active:true}" readonly="true">
    <md-chip-template>
        <span ng-click="$chip.active=false">
            <strong>{{$chip.name}}</strong>
        </span>
    </md-chip-template>
</md-chips>
...

Here is a plnkr example.

EDIT:

Modified plunker to show only active md-chips.

Hope it will help.

Upvotes: 2

Related Questions