Looping in Angular JS

Я новичок в Angular JS, и я пытался создать демо-приложение ASP .Net MVC, используя его. Выражаясь просто, у меня есть список стран, каждая из которых имеет список 3 ассоциированных городовLooping 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 
         } 
        ];

и в моей странице просмотра, я отображая их всех.

У меня есть текстовое поле поиска, которое может искать по названиям стран, а также по названиям городов. Для этого существует функция $ 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; 
        } 
});

Вот код вид

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

Но функция поиска не работает должным образом. Вот скриншот просмотра страницы HTML

Я знаю, как-то логика не совсем правильно разработана для поиска функции. Не могли бы вы помочь мне?

источник

2016-03-29 StrugglingCoder

фильтр: searchText, а не поиск. Это соответствует вашей ng-модели –

Фактически нет. У меня есть поиск по названию страны и названиям городов, также связанным со страной. Так что $ scope.search есть. – StrugglingCoder

также, Флорида не город, но государство – Austin

Я думаю, что вы проблема может быть анонимной функцией в вашем forEach. Он вернется к анонимной функции, но не к внешней функции $scope.search(). Поэтому вместо того, чтобы напрямую возвращаться из функции мутировать переменную и возвращать ее в конце, или использовать reduce, вместо forEach.

источник

2016-03-29 19:15:13

Но что бы искать по всем столбцам? – StrugglingCoder

Не могли бы вы помочь с этим. У меня нет большой идеи по этому поводу. Я только начинаю с этого. – StrugglingCoder

Проверьте мои изменения. –

Предполагая, что функция поиска вызывается, вы возвращаете только логическое значение для фильтра для поиска объекта. Поскольку объект модели, который вы передаете в фильтр, не имеет логического свойства для поиска, которое не даст никаких результатов. То, что вы хотите сделать, - это фильтровать строковое значение searchText для фильтрованной модели.

Если вы хотите явно искать имя города для модели, я бы предложил передать имя свойства фильтру.

<tr ng-repeat="country in countries | filter : {cities.name : searchText} : true | limitTo: rowLimit | orderBy : '+foundationDate'">

Чтобы найти названия стран и городов, я бы предложил создать настраиваемый фильтр и передать фильтр в модель searchText.

[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; 
    } 
})

Вы бы использовали это как встроенный фильтр углов в разметке html.

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

источник

2016-03-29 19:29:47 DevBuicQ

Ему нужны как город, так и государство. –

@ Vance Rivera Я полностью понимаю, чего вы пытаетесь достичь, но немного любопытно, для чего первый параметр obj? Вы отправляете только параметр searchText? Тогда почему первый параметр? – StrugglingCoder

Первым параметром является модель obj, которую вы пытаетесь фильтровать. Угловой автоматически передает модель через фильтр. Все, что после двоеточия является дополнительным параметром, который вы передаете, но по умолчанию фильтр будет передан объекту, который вы хотите фильтровать. – DevBuicQ

Looping in Angular JS

ответ

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