AngularJS Filter using Radio buttons

Question

I want to filter Data using Custom filter or default Angular Filter but problem is radio button 1st Click gives data , Next click gives data but includes previous data , I need to uncheck 1st Click and Click next button to get Data.

<div ng-app="myApp" ng-controller="OrderController" ng-init="GetOrders()">
<div ng-repeat="x in List"><input type="radio" name="rdnStatus" ng-model="OrderStatus" ng-click="FilterOrder(status)" /></div>

<Input ng-repeat="x in List" type="text" value="{{x.Product}}-{{x.Amount}}">
</div>

var app = angular.module("myApp",[]);
app.controller("OrderConroller",function($scope,$http){

$scope.GetOrders = function(){
Response.Data - http/GET 
url : ../GetOrders/
};

[{ OrderId : 1 ,
   OrderData : 2020-05-12 ,
   OrderStatus : Accepted ,
   Amount : 1000 ,
   Product : Apple ,
  },
{ OrderId : 2,
   OrderData : 2020-05-12 ,
   OrderStatus : Rejected,
   Amount : 2000 ,
   Product : Apple ,
  },
{ OrderId : 3,
   OrderData : 2020-05-12 ,
   OrderStatus : Accepted ,
   Amount : 3000 ,
   Product : Apple ,
  },
{ OrderId : 4 ,
   OrderData : 2020-05-12 ,
   OrderStatus : Accepted ,
   Amount : 4000 ,
   Product : Apple ,
  },
{ OrderId : 5 ,
   OrderData : 2020-05-12 ,
   OrderStatus : Rejected,
   Amount : 5000 ,
   Product : Apple ,
  },
{ OrderId : 6 ,
   OrderData : 2020-05-12 ,
   OrderStatus : Accepted ,
   Amount : 6000 ,
   Product : Apple ,
  },
{ OrderId : 7 ,
   OrderData : 2020-05-12 ,
   OrderStatus : Accepted ,
   Amount : 7000 ,
   Product : Apple ,
  },
{ OrderId : 8 ,
   OrderData : 2020-05-12 ,
   OrderStatus : Rejected,
   Amount :8000 ,
   Product : Apple ,
  },
{ OrderId : 9,
   OrderData : 2020-05-12 ,
   OrderStatus : Accepted ,
   Amount : 9000 ,
   Product : Apple ,
  },
{ OrderId : 10 ,
   OrderData : 2020-05-12 ,
   OrderStatus : Accepted ,
   Amount : 10000 ,
   Product : Apple ,
  }]

});

I want to filter Data using Custom filter or default Angular Filter but problem is radio button 1st Click gives data , Next click gives data but includes previous data , I need to uncheck 1st Click and Click next button to get Data.

Is there a way i can achieve this functionality . Please help

NTP · Accepted Answer · 2020-05-14 07:47:05Z

1

As you said you can use default angular filter where you can filter for the property you want,

<div ng-init="FilterValue = 'Rejected'">
  <div ng-repeat="x in data | filter:{OrderStatus:FilterValue}">
      <Input  type="text" value="{{x.Product}}-{{x.Amount}}">
  </div>
</div>

You can find more detailed information about angularjs filters in the documentation

answered May 14, 2020 at 7:47

NTP

4,4483 gold badges18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mohammed Ali Asgar Over a year ago

The problem is If i press Accept radio button , Data will show all Accepted Result , Next If i press Rejected there will be zero result as first click if removing all data except Accepted. I need to reset the data when i second click. Any way Available?

NTP Over a year ago

@MohammedAliAsgar could you remove your ng-click="FilterOrder(status)" and try the html in answer please.

Collectives™ on Stack Overflow

AngularJS Filter using Radio buttons

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related