CODEWITHSUNDEEP
javascripthtmlangularjsselectbutton
Leo Messi
Leo Messi

Reputation: 6186

button and selector don't communicate correctly in AngularJS

There is a selector with some options and a button.

If some option is selected, a filter is applied to the table data and show only the wanted data.

If the button is clicked, the selector must be reset to the first option and also the table (must show all the data).

The issue I have is that I cannot have both functionalities in the same time...

this is the selector:

<select ng-model="$ctrl.type">
    <option value="">All</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

the reset button:

<div class="btn action-btn" ng-click="$ctrl.doReset()">
    Reset
</div>

the table that must be updated based on the selector:

<tbody>
    <tr ng-repeat="rows in $ctrl.myData | filter: {Type:type} track by $index">
        <td>
            <span>{{rows.Type}}</span>
        </td>
        <td>
            <span ng-repeat="row in rows.Names track by $index">{{rows.Names[$index]}}</span>
        </td>
    </tr>
</tbody>

and the JS controller:

class MyCtrl {
    constructor(...) {
        ...
        this.type = "";

    }
...

    doReset() {
        this.type = "";
    }
}

as it is now, the selector doesn't have any functionality. No matter what I select, the data remains the same on the table, no filtering is performed. But the reset button works, it resets the selector to the first option if it is clicked.

if I change the first line in selector from this:

<select ng-model="$ctrl.type">

to this: <select ng-model="type">

the functionality of the reset button is lost but the selector works! If something is selected the table data is filtered.

How can it be managed to have both functionalities in the same time?

Upvotes: 1

Views: 30

Answers (1)

dfsq
dfsq

Reputation: 193311

You have a problem in ngRepeat directive. It should look like:

ng-repeat="rows in $ctrl.myData | filter: {Type: $ctrl.type} track by $index"

So filtering part of it should be {Type: $ctrl.type}, since you have $ctrl.type on controller instance, not $scope.

Upvotes: 1

Related Questions