rawatdeepesh rawatdeepesh - 1 month ago 11
AngularJS Question

filter list and show results on text entry in angular

I have a div controller with a div having initialized with an array inside the controller using

ng-init
.I need to show the filtered objects inside this array using a text from textbox as a filter. Also I need the objects to be displayed when user types in the input. This is my base code :

<!DOCTYPE html>
<html lang="en-US">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="angular.min.js"></script>
<body>


<div ng-app="myApp" ng-controller="personCtrl">
<div style="display:none" ng-init="CustList=[
{custid:1,custname:'Raj Export House1',address:'Plot.No.123, Industrial Area, Noida 201301'},
{custid:2,custname:'Vinay Export House2',address:'Plot.No.567, Industrial Area, New Delhi 201301'},
{custid:3,custname:'Maya Export House3',address:'Plot.No.777, Industrial Area, Faridabad 201301'},
{custid:4,custname:'Devat Export House4',address:'Plot.No.425, Industrial Area, Gurgaon201301'},
{custid:5,custname:'Yespal Export House5',address:'Plot.No.153, Industrial Area, Noida 201301'},
{custid:6,custname:'Abhinav Export House6',address:'Plot.No.1423, Industrial Area, Noida 201301'},
{custid:7,custname:'Surya Export House7',address:'Plot.No.1253, Industrial Area, Noida 201301'},
{custid:8,custname:'Lalata Export House8',address:'Plot.No.12553, Industrial Area, Gurgaon 201301'},
{custid:9,custname:'Raj Export House9',address:'Plot.No.12553, Industrial Area, Noida 201301'},
{custid:10,custname:'Manu Export House10',address:'Plot.No.15823, Industrial Area, Noida 201301'}]"></div>
<label>Search</label>
<input type="text" ng-model="txtSearch" ng-change="CallSearch(txtSearch)">
<ul>
<li style="display:none" ng-repeat="cust in CustList | filter:txtSearch">
{{ cust.custid + ' ' + cust.custname + ' ' + cust.address + ',' }}
</li>
</ul>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.CallSearch = function(textSearch)
{
if(textSearch.length>0);
$("li").css("display","block");
}
});
</script>


I also tried using
ng-repeat="cust in CustListfunction()
and defined this function inside scope

$scope.CustListfunction=function(){
var result=[];
angular.forEach($scope.CustList, function (item) {
if($scope.textSearch.length>0)
{
result.push(item);
}
});
return result;
}


But it didnt get me anywhere, is there anything I am missing.
Thanks

Answer

this is what you probably want:

<body>

  <div ng-app="myApp" ng-controller="personCtrl">
    <label>Search</label>
    <input type="text" ng-model="txtSearch">
    <ul>
      <li ng-if="txtSearch" ng-repeat="cust in CustList | filter:txtSearch">
        {{ cust.custid + '   ' + cust.custname + '   ' + cust.address + ',' }}
      </li>
    </ul>
  </div>

</body>

results will be displayed only if search criteria was entered. also, as was already said here, move your list to the controller:

app.controller('personCtrl', function($scope) {
  $scope.CustList = [
    {custid: 1, custname: 'Raj Export House1', address: 'Plot.No.123, Industrial Area, Noida 201301'},
    {custid: 2, custname: 'Vinay Export House2', address: 'Plot.No.567, Industrial Area, New Delhi 201301'},
    {custid: 3, custname: 'Maya Export House3', address: 'Plot.No.777, Industrial Area, Faridabad 201301'},
    {custid: 4, custname: 'Devat Export House4', address: 'Plot.No.425, Industrial Area, Gurgaon201301'},
    {custid: 5, custname: 'Yespal Export House5', address: 'Plot.No.153, Industrial Area, Noida 201301'},
    {custid: 6, custname: 'Abhinav Export House6', address: 'Plot.No.1423, Industrial Area, Noida 201301'},
    {custid: 7, custname: 'Surya Export House7', address: 'Plot.No.1253, Industrial Area, Noida 201301'},
    {custid: 8, custname: 'Lalata Export House8', address: 'Plot.No.12553, Industrial Area, Gurgaon 201301'},
    {custid: 9, custname: 'Raj Export House9', address: 'Plot.No.12553, Industrial Area, Noida 201301'},
    {custid: 10, custname: 'Manu Export House10', address: 'Plot.No.15823, Industrial Area, Noida 201301'}
  ]
});

plunker: http://plnkr.co/edit/H5lY8lXDivCnKYfogRll?p=preview