AngularJS通過文本和多個複選框進行ng-repeat過濾

我有一組數據，其中包含名稱，年份，高度，體重和屬性等屬性。我的數據中會有兩種或更多的運動類型，我希望能夠使用複選框以及文本搜索縮小ng-repeat的結果。作爲一個有角度的noob，我很難設置它。我迄今爲止的工作代碼非常少。有沒有一個簡單的方法來做到這一點？有沒有簡單的方法讓這項工作只有兩項運動？（這兩個複選框當前沒有鏈接到任何東西，它們只是當前html的示例）。AngularJS通過文本和多個複選框進行ng-repeat過濾

的index.html

<div ng-controller="controller"> 
<input class="p-search" ng-model="query" placeholder="search anything"> 

<input class="sport-toggle baseball" type="checkbox" checked> 
<input class="sport-toggle football" type="checkbox" checked> 

<div class="player-card" ng-repeat="player in roster | filter: query"> 
    <div>player {{info}}</div> 
</div> 
</div>

controller.js

來源

2015-09-04 divdivdivdiv

請分享您的JSON –

$ scope.roster = [ { 「名稱的一些示例數據'：'john smith'， 'height'：'5'4''「， 'weight'：'137'， 'game'：'棒球' }，{ '名'： '史蒂夫·瓊斯'， '高度'：「6'5 ''」， '重'： '182'， '遊戲'： '足球' }， \t { '名稱'： '麥鮑勃'， '高度'：「5'11 ''」， '體重'： '149'， '遊戲'： '棒球' } ]; – divdivdivdiv

需要添加上的複選框和輸入字段NG-模型，並通過查詢進行過濾：作爲對象。查詢對象的屬性應該與JSON的屬性相同。 HTML：

<div ng-controller="controller"> 
    <input class="p-search" ng-model="query.Name" placeholder="search anything"> 

    <input class="sport-toggle baseball" type="checkbox" ng-model="query.check1" checked> 
    <input class="sport-toggle football" type="checkbox" ng-model="query.check2" checked> 

    <div class="player-card" ng-repeat="player in roster | filter: query"> 
    <div>player {{player.Name}}</div> 
    </div> 
</div>

Controller.js

var rosterfy = angular.module('rosterfy', []); 
rosterfy.controller('controller', function controller($scope) { 
    $scope.roster = [{ 
    Name:"Steve", 
    check1:true, 
    check2:false 
    },{ 
    Name:"Michael", 
    check1:false, 
    check2:true 
    },{ 
    Name:"James", 
    check1:true, 
    check2:false 
    },{ 
    Name:"Peter", 
    check1:true, 
    check2:true 
    }]; 
});

這裏有一個JSBin工作示例：Example

來源

2015-09-04 06:16:07

這對我來說是一個很好的備份計劃，但我希望將'遊戲'數據存儲爲一個字符串，例如{'game'：'baseball'}，並讓複選框直接匹配字符串，而不是{'baseball' ：'true'，'football'：false} – divdivdivdiv

AngularJS通過文本和多個複選框進行ng-repeat過濾

回答

相關問題