Filterliste und Ergebnisse zu Texteingabe in Winkel

anzeigen

Ich habe einen Div-Controller mit einem Div mit einem Array innerhalb der Steuerung mit ng-init initialisiert .Ich muss die gefilterten Objekte in diesem Array mit einem Text aus dem Textfeld als Filter anzeigen . Außerdem brauche ich die Objekte, die angezeigt werden, wenn der Benutzer die Eingabe eingibt. Das ist mein Basiscode:Filterliste und Ergebnisse zu Texteingabe in Winkel

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

Ich habe auch versucht ng-repeat="cust in CustListfunction() mit und definiert diese Funktion innerhalb Umfang

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

Aber es hat nicht mich überall bekommen, gibt es alles, was ich bin fehlt. Dank

Quelle

2016-10-16 rawatdeepesh

Dies ist die Abhilfe, die ich dachte, und es ist in der Nähe, was ich brauchte:

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

Nur verwendet ng-Show, könnte ng-deaktiviert auch verwendet haben. Vielen Dank.

Quelle

2016-10-17 19:21:04 rawatdeepesh

Kommentar $scope.CustListfunction wenn noch in Gebrauch, müssen sie nicht
Deklarieren $scope.txtSearch
console.log('') innen CallSearch Setzen, um zu sehen, ob es es richtig schlagen wird.
Entfernen Sie style="display:none", um zu sehen, ob die Dinge tatsächlich funktionieren. Machen Sie Ihr Aussehen Änderungen nach
Ich würde wahrscheinlich nicht ng-init mein Array so, legte es in die $scope.CustList= [.....] in das Skript. Nicht sicher, ob das aktuelle Setup überhaupt funktioniert.

Hoffe, dies hilft, Ihr Problem einzugrenzen.

Quelle

2016-10-16 23:43:22 Searching

Vielen Dank für die Vorschläge, arbeiten an ihnen und werden meinen Code neu bearbeiten.Arbeiten auf $ scope.textSearch könnte arbeiten.älterer ich könnte tatsächlich alle Objekte aus Array auf Text ändern, aber es konnte nicht auf dem Bildschirm angezeigt werden. – rawatdeepesh

das ist, was Sie wollen wahrscheinlich:

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

Ergebnisse werden nur Kriterien eingegeben wurde, wenn Suche angezeigt werden. auch, wie bereits hier gesagt, bewegen Sie die Liste an die Steuerung:

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

Quelle

2016-10-17 00:11:03 Andriy

Thx, ich habe bereits diese Lösung, aber zusätzlich möchte ich die Kundendetails nur zeigen, wenn Benutzer etwas in die Textbox eingibt. Daher sollte die Seite beim Laden nur mit einem Textfeld versehen sein. – rawatdeepesh

Fügen Sie einfach ng-if = "txtSearch" zu Ihrem li-Element hinzu, habe ich meine Antwort aktualisiert und plumpste – Andriy

Thx für Ihre Antwort funktioniert es. Gibt es einen Workaround, der '' beinhalten könnte und dann txtSearch.length überprüfen, um das gleiche zu erreichen, schlagen Sie bitte – rawatdeepesh

Filterliste und Ergebnisse zu Texteingabe in Winkel

Antwort

Verwandte Themen