How to filter grid view data from specific column of ng-repeat on button click

Question

JS File:

$scope.GridFilter = function ()
{
    var ddlCategory = $('#ddlValue').val();
    $scope.search = ddlCategory;
}

CHtml :

    <select id="ddlValue" name="ddlValue">
       <option value="">-- Select any Value--</option>
       <option ng-repeat="item in DataObject" value="{{item.Category}}">{{item.Category}}</option>
    </select>
    <button ng-click="GridFilter()">Filter Grid</button>

Grid:

<tr ng-repeat="item in DataGrid | filter:search">
      <td>{{item.Name}}</td>
      <td>{{item.Category}}</td>
      <td>{{item.Description}}</td>
      <td>{{item.Status}}</td>
</tr>

I want to filter data from drop-down value when button is clicked. It need to be searchable for Category column only, but it searching all other fields so the grid showing extra records.

Answer 1

You don't need JQuery selector to get the selected value from dropdown. Add ng-model in select element for that. By this way, table will filter on drop-down selection without the need of a button:

<select name="Select" id="multipleSelect" ng-model="search">
    <option value="">-- Select any Value--</option>
    <option ng-repeat="item in DataObject" value="{{item.Category}}">{{item.Category}} 
    </option>
</select>

Check a working demo: DEMO

If you want to use a button for the filtering action, use a new variable for the filtered array and set it in the filter function:

 $scope.GridFilter = function() {
     $scope.filteredGrid = $scope.DataGrid.filter((d) => d.Category == $scope.search);
 }

For example: DEMO2