Looping in Angular JS

Ich bin ein Neuling zu Angular JS und ich habe versucht, eine Demo-ASP .Net MVC-Anwendung damit zu bauen. es einfach Einlochen, habe ich eine Liste der Länder, von denen jeder eine Liste von 3 zugeordnet StädteLooping in Angular JS

var myModule = angular 
       .module("myModule", []) 
       .controller("myController", function ($scope) { 
        var countries = [ 
         { 
          name: "UK", 
          cities: [ 
            {name: "London"}, 
            {name: "Birmingham" }, 
            {name: "Manchestar" } 
          ], 
          flag: "/Images/UK.gif", 
          foundationDate: new Date("May 20,1916"), 
          likes: 0, 
          dislikes: 0 
         }, 
         { 
          name: "USA", 
          cities: [ 
            {name: "Los Angeles"}, 
            {name: "Houston"}, 
            {name: "Florida"}, 
          ], 
          flag: "/Images/USA.png", 
          foundationDate: new Date("August 01,1887"), 
          likes: 0, 
          dislikes: 0 
         }, 
         { 
          name: "INDIA", 
          cities: [ 
            { name: "Hyderabad" }, 
            { name: "Mumbai" }, 
            { name: "Kolkata" }, 
          ], 
          flag: "/Images/INDIA.jpg", 
          foundationDate: new Date("August 15,1947"), 
          likes: 0, 
          dislikes: 0 
         } 
        ];

und meiner Ansicht Seite hat, ich bin sie alle angezeigt werden.

Ich habe ein Suchfeld, das über Ländernamen und auch über die Stadtnamen suchen kann. Dafür gibt es die Funktion $ scope.search.

    $scope.search = function (country) { 
         if ($scope.searchText == undefined) { 
          return true; 
         } 
         angular.forEach(country.cities, function (item) { 
          if (item.name.toLowerCase().indexOf($scope.searchText.toLowerCase()) != -1) 
           return true; 
         }); 
         return false; 
        } 
});

Hier ist der Ansicht Code

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myModule"> 
<head> 
    <title></title> 
    <script src="Scripts/angular.js"></script> 
    <script src="Scripts/MyModuleScript.js"></script> 
    <style> 
     table, th, td { 
      border-collapse:collapse; 
      border:1px solid black; 
     } 
     th, td { 
      text-align:center; 
      vertical-align:middle; 
     } 
    </style> 
</head> 
<body ng-controller="myController"> 
    Rows to display : <input type="number" step="1" min="0" max="3" ng-model="rowLimit" /> 
    <br /> 
    <br /> 
    Search : <input type="text" placeholder="Search Countries & Cities" ng-model="searchText" /> 
    <br /> 
    <br /> 
    <div> 
     <table style="padding:5px"> 
      <thead> 
       <tr> 
        <th>Country</th> 
        <th>City 1</th> 
        <th>City 2</th> 
        <th>City 3</th> 
        <th>Flag</th> 
        <th>Foundation Date</th> 
        <th>Likes</th> 
        <th>Dislikes</th> 
        <th colspan="2">Actions</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="country in countries | orderBy : '+foundationDate' | limitTo: rowLimit | filter : search"> 
        <td>{{ country.name }}</td> 
        <td ng-repeat="city in country.cities"> 
         {{ city.name }} 
        </td> 
        <td><img ng-src="{{ country.flag }}" style="height:100px;width:150px"/> </td> 
        <td>{{ country.foundationDate | date : "dd/MM/yyyy" }}</td> 
        <td>{{ country.likes }}</td> 
        <td>{{ country.dislikes }}</td> 
        <td><input type="button" value="Like" ng-click="incrementLikes(country)"</td> 
        <td><input type="button" value="Dislike" ng-click="incrementDislikes(country)"</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</body> 
</html>

Aber die Suchfunktion richtig funktioniert nicht. ist hier ein Screenshot der HTML-Ansicht Seite

Ich weiß irgendwie die Logik bei nicht alle richtig für die Funktion Suche entwickelt. Könnte mir bitte jemand helfen?

Quelle

2016-03-29 StrugglingCoder

Filter: searchText, statt der Suche. Es entspricht Ihrem ng-Modell –

Eigentlich nein. Ich habe über den Namen des Landes und die Städte Namen auch mit dem Land verbunden. Also $ scope.search ist da. – StrugglingCoder

auch, Florida ist keine Stadt, aber ein Staat – Austin

Ich denke, du bist ein Problem könnte nur die anonyme Funktion in Ihrem forEach sein. Es wird an die anonyme Funktion, aber nicht an die äußere Funktion $scope.search() zurückgegeben. Anstatt also direkt von einer Funktion zurückzukehren, mutieren Sie eine Variable und geben sie am Ende zurück oder verwenden Sie reduce statt forEach.

Quelle

2016-03-29 19:15:13

Aber das würde über alle Spalten richtig suchen? – StrugglingCoder

Könnten Sie bitte mit dem gleichen helfen. Ich habe keine Ahnung davon. Ich fange gerade erst damit an. – StrugglingCoder

Überprüfen Sie meine Bearbeitung. –

Unter der Annahme, dass die Suchfunktion aufgerufen wird, geben Sie nur einen booleschen Wert für den Filter zurück, um das Objekt zu suchen. Da das Modellobjekt, das Sie an den Filter übergeben, über keine boolesche Eigenschaft verfügt, nach der gesucht werden kann, werden keine Ergebnisse erzielt. Was Sie tun möchten, ist den String-Wert von searchText für das gefilterte Modell zu filtern.

Wenn Sie nur explizit nach dem Städtenamen des Modells suchen möchten, würde ich vorschlagen, den Eigenschaftsnamen an den Filter zu übergeben.

Um nach Ländern und Städtenamen zu suchen, empfehle ich, einen benutzerdefinierten Filter zu erstellen und den Filter dem searchText-Modell zu übergeben.

[ModuleNameHere].filter('filterCountryCityNames', function() { 
    return function(obj, searchValue) { 
     var options = [];   

     if (searchValue === undefined || searchValue === null) 
      return obj; 
     searchValue = searchValue.toLowerCase(); 
     angular.forEach(obj, function(value) { 

     var foundCity = value.cities.map(function(r) { 
      return r.name.toLowerCase().indexOf(searchValue) >= 0; 
     }).sort().pop(); 

     if (value.name.toLowerCase().indexOf(searchValue) >= 0 || foundCity) { 
      options.push(value); 
     } 
    }); 
     return options; 
    } 
})

Sie würden dies wie den eingebauten Angular-Filter im HTML-Markup verwenden.

<tr ng-repeat="country in countries | filterCountryCityNames : searchText | orderBy : '+foundationDate'| limitTo: rowLimit ">

Quelle

2016-03-29 19:29:47 DevBuicQ

Er braucht aber sowohl Stadt als auch Staat. –

@Vance Rivera Ich verstehe völlig, was Sie erreichen wollen, aber nur ein bisschen neugierig, was ist der erste Parameter, für den obj ist? Sie senden nur den SearchText Parameter richtig? Warum dann der erste Parameter? – StrugglingCoder

Der erste Parameter ist das Modellobjekt, das Sie filtern möchten. Angular leitet das Modell automatisch an den Filter weiter. Alles nach dem Doppelpunkt ist ein zusätzlicher Parameter, den Sie übergeben, aber der Filter wird automatisch an das Objekt übergeben, das Sie filtern möchten. – DevBuicQ

Looping in Angular JS

Antwort

Verwandte Themen