angularjs filterリストの外側にあるng-repeatリンク

Question

入力フィールドに基づいて結果をフィルタリングする簡単なアプリケーションを構築します。繰り返しリストの外側にあるリンクを追加しています。クリックすると、以下のリストをフィルタリングできるようになります。

私はこの問題に取り組むさまざまな方法をオンラインで検索しましたが、解決策をまだ見つけていません。

私はすでに検索でフィルタリングしていますが、一般的な検索エントリであるリンクをクリックしたいと考えています。

私のコードは次のとおりです。

<a href="">tag one</a> 
<a href="">tag two</a> 
<a href="">tag three</a> 

<tr ng-repeat="item in items | orderBy:'date' | filter:itemsFilter" ng-click="clickedItem(item.id)"> 
     <td><a href="{{item.url}}"><img ng-src="{{item.imageUrl}}" alt="{{item.title}}"></a></td> 
     <td> 
     <a href="{{item.url}}">{{item.title}}</a><br> 
     </td> 
     <td><i class="el el-time"></i> {d{item.date}}</td> 
     <td class="drop-me">{{item.description}}</td> 
     <td class="tag-me">{{item.tag}}</td> 
    </tr> 
    <tr ng-hide="item.length == 0"><td><p>There are no items!</p></td></tr> 

私は、下記のリストを更新し、クリックNGを経由してアイテムを注入する方法を理解することはできません、カスタムフィルタを試してみました。

私は、タグのリンクのいずれかをクリックしたいとあなたはコメントで提案されているように、それは

おかげ

Answer 1

下のリストをフィルタリングフィルタリングのためにタグを追加する配列を作成できます。カスタムフィルタでは、アイテム配列をフィルタできます。

また、ngTagsInputは、タグ付きの入力フィールドを作成するのに役立つ素敵な指示です。

以下のデモまたはjsfiddleをご覧ください。

angular.module('demoApp', ['ngTagsInput']) 
 
    // filter from here (with some modifications) http://stackoverflow.com/questions/23785592/apply-dynamic-filters-using-tags 
 
    .filter('filterByTags', function() { 
 
    return function(items, tags) { 
 
     var filtered = []; // Put here only items that match 
 
     (items || []).forEach(function(item) { // Check each item 
 
     var matches = tags.some(function(tag) { // If there is some tag 
 
      return item.tag == tag.text; 
 
     }); // we have a match 
 
     if (matches) { // If it matches 
 
      filtered.push(item); // put it into the `filtered` array 
 
     } 
 
     }); 
 
     return filtered.length == 0 ? items : filtered; // Return the array with items that match any tag // return all if no tags 
 
    }; 
 
    }) 
 
    .controller('mainController', MainCtrl); 
 

 
function MainCtrl() { 
 
    var vm = this; 
 

 
    function isTagInTags(tag) { 
 
    var seen = false; 
 
    //console.log('test', tag); 
 
    for (var i = 0; i < vm.tags.length; i++) { 
 
     //console.log(vm.tags[i].text, tag); 
 
     if (vm.tags[i].text == tag) { 
 
     seen = true; 
 
     return seen; 
 
     } 
 
    } 
 
    return seen; 
 
    } 
 

 
    vm.addTag = function(tag) { 
 
    //console.log(tag); 
 
    if (!isTagInTags(tag)) { 
 
     vm.tags.push({ 
 
     text: tag 
 
     }); 
 
    } 
 
    }; 
 

 
    vm.data = [{ 
 
    id: 0, 
 
    tag: 'JavaScript', 
 
    title: 'this is JS related' 
 
    }, { 
 
    id: 1, 
 
    tag: 'Java', 
 
    title: 'this is Java related' 
 
    }, { 
 
    id: 2, 
 
    tag: 'Python', 
 
    title: 'this is Python related' 
 
    }, { 
 
    id: 3, 
 
    tag: 'Python', 
 
    title: 'also Python stuff...' 
 
    }]; 
 

 
    var unique = []; 
 
    vm.availTags = []; 
 
    for (i in vm.data) { 
 
    var item = vm.data[i]; 
 
    //console.log(item); 
 
    if (unique.indexOf(item.tag) === -1) { 
 
     unique.push(item.tag); 
 
     vm.availTags.push(item.tag); 
 
    } 
 
    } 
 

 
    vm.loadItems = function(query) { 
 
     //console.log(query); 
 
     return vm.availTags.filter(function(tag) { 
 
     var testTag = tag.toLowerCase(); 
 
     return testTag.indexOf(query.toLowerCase()) >= 0; 
 
     }); 
 
     //return $http.get('/tags?query=' + query); // use this with a backend 
 
    } 
 
    //console.log(vm.availTags); 
 

 
    vm.tags = []; //vm.availTags[0]; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.css" rel="stylesheet" /> 
 
<div ng-app="demoApp" ng-controller="mainController as ctrl"> 
 
    <button ng-click="ctrl.addTag('JavaScript')"> 
 
    JavaScript 
 
    </button> 
 
    <button ng-click="ctrl.addTag('Java')"> 
 
    Java 
 
    </button> 
 
    <!--{{ctrl.tags}}--> 
 
    <tags-input ng-model="ctrl.tags"> 
 
    <auto-complete source="ctrl.loadItems($query)"></auto-complete> 
 
    </tags-input> 
 

 
    <div ng-repeat="item in ctrl.data | filterByTags: ctrl.tags"> 
 
    {{item.title}} 
 
    </div> 
 
</div>

Answer 2

トライ加えNG-のhref

<a ng-href="">tag one</a> 
<a ng-href="">tag two</a> 
<a ng-href="">tag three</a> 

<tr ng-repeat="item in items | orderBy:'date' | filter:itemsFilter" ng-click="clickedItem(item.id)"> 
     <td><a ng-href="{{item.url}}"><img ng-src="{{item.imageUrl}}" alt="{{item.title}}"></a></td> 
     <td> 
     <a ng-href="{{item.url}}">{{item.title}}</a><br> 
     </td> 
     <td><i class="el el-time"></i> {d{item.date}}</td> 
     <td class="drop-me">{{item.description}}</td> 
     <td class="tag-me">{{item.tag}}</td> 
    </tr> 
    <tr ng-hide="item.length == 0"><td><p>There are no items!</p></td></tr>