Список фильтров и показать результаты при вводе текста в угловом

У меня есть контроллер div с инициализацией div с массивом внутри контроллера с использованием ng-init. Мне нужно показать отфильтрованные объекты внутри этого массива, используя текст из текстового поля в виде фильтра , Также мне нужны объекты, которые будут отображаться, когда пользователь вводит данные во вход. Это мой основной код:Список фильтров и показать результаты при вводе текста в угловом

<!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>

Я также попытался с помощью ng-repeat="cust in CustListfunction() и определить эту функцию внутри сферы

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

Но не получил меня в любом месте, есть все, что мне не хватает. Благодаря

источник

2016-10-16 rawatdeepesh

Это обходной путь, я понял, и это близко к тому, что мне было нужно:

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

<div style="height:100px"> 

</div> 

<div ng-app="myApp" ng-controller="personCtrl"> 
<div ng-init="CustList=[ 
{custid:1,custname:' Export House1',address:'Plot.No.123, Industrial Area, Pune 200180'}, 
{custid:2,custname:'Vi Export House2',address:'Plot.No.567, Industrial Area, New Delhi 201301'}, 
{custid:3,custname:'May Export House3',address:'Plot.No.777, Industrial Area, Faridabad 201301'}, 
{custid:4,custname:'Dev Export House4',address:'Plot.No.425, Industrial Area, Mumbai 60021'}, 
{custid:5,custname:'Yes Export House5',address:'Plot.No.153, Industrial Area, Pune 200180'}, 
{custid:6,custname:'nav Export House6',address:'Plot.No.1423, Industrial Area, Pune 200180'}, 
{custid:7,custname:' Export House7',address:'Plot.No.1253, Industrial Area, Pune 200180'}, 
{custid:8,custname:'Lat Export House8',address:'Plot.No.12553, Industrial Area, Mumbai 201301'}, 
{custid:9,custname:' Export House9',address:'Plot.No.12553, Industrial Area, Pune 200180'}, 
{custid:10,custname:'Man Export House10',address:'Plot.No.15823, Industrial Area, Pune 200180'}]"></div> 
<label>Search</label> 
<input type="text" ng-model="txtSearch" ng-change="CallSearch(txtSearch)"> 
<ul> 
    <li ng-show='myVar' class="filterlist" 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.myVar=false; 
$scope.CallSearch = function(textSearch) 
{ 

    if(textSearch.length>0); 
    { 
     $scope.myVar=!$scope.myVar; 


    } 

} 
}); 
</script>

Только что используемое ng-show, возможно, использовало ng-disabled too.Many Thanks.

источник

2016-10-17 19:21:04 rawatdeepesh

Комментарий $scope.CustListfunction если все еще в использовании, не нужно это
Объявить $scope.txtSearch
Поместите console.log('') внутри CallSearch, чтобы увидеть, если он бил его правильно.
Уберите style="display:none", чтобы узнать, действительно ли все работает. Внесите изменения в ваш список после
У меня, вероятно, не было бы ng-init моего массива, вставьте его в $scope.CustList= [.....] в скрипте. Не уверен, что текущая установка работает даже.

Надеюсь, это поможет сузить проблему.

источник

2016-10-16 23:43:22 Searching

Благодарим за предложения, работая над ними и переделаю мой код. Работа над $ scope.textSearch может работать. Теперь я мог фактически получить все объекты из массива в текстовом режиме, но он не мог отображаться на экране. – rawatdeepesh

это то, что вы, вероятно, хотите:

<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>

результаты будут отображаться только если критерии поиска был введен. также, как уже здесь было сказано, переместите список на контроллер:

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

источник

2016-10-17 00:11:03 Andriy

Thx, у меня уже есть это решение, но, кроме того, я хочу, чтобы информация о клиенте показывалась только когда пользователь вводит что-то в текстовое поле. Таким образом, страница должна быть только с текстовым полем при загрузке. – rawatdeepesh

просто добавьте ng-if = "txtSearch" в ваш элемент li, я обновил свой ответ и plunker. – Andriy

Thx для вашего ответа это работает. Существует ли какое-либо обходное решение, которое может включать '', а затем проверку txtSearch.length для достижения того же, пожалуйста, предложите – rawatdeepesh

Список фильтров и показать результаты при вводе текста в угловом

ответ

Смежные вопросы