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过滤

回答

相关问题