Angular JSのルーピング

私はAngular JSの初心者です。私はデモ用ASP .Net MVCアプリケーションを使用して構築しようとしています。は、単にそれを置く、私は各3つの関連する都市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

filter：検索の代わりにsearchText。お使いのモデルに一致します –

実際にはありません。私は国の名前とその国に関連する都市の名前を検索しています。 $ scope.searchはそこにあります。 – StrugglingCoder

また、フロリダは都市ではありませんが、州は – Austin

あなたは問題があなたのforEachにある匿名機能かもしれないと思います。それは無名関数にtrueを返しますが、外側関数$scope.search()には返しません。したがって、関数から直接戻って変数を変更し、最後にそれを戻す代わりに、forEachの代わりにreduceを使用してください。

$scope.search = function (country) { 
        if ($scope.searchText == undefined) { 
         return true; 
        } 

        if (country.name.toLowerCase().indexOf($scope.searchText.toLowerCase()) != -1) 
         return true; 

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

出典

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です。 Angularは自動的にモデルをフィルタに渡します。コロンの後ろにあるものは、あなたが渡している余分なパラメータですが、フィルタは本質的にフィルタリングするオブジェクトに渡されます。 – DevBuicQ

答えて

関連する問題