javascript - 需要 AngularJS 和 Rails 推荐

Question

我目前正在使用 Rails 构建一个网站，但希望将 AngularJS 纳入以下用途:

在 2 种不同类型的数据之间快速排序(例如，单击列表中的不同餐厅，然后单击列表中的不同食物类别并查看所有结果)

搜索餐厅、食品类别和食品。

确定“kids”是否包含在食品中，并用 bool 值显示。

经过大量研究后，我尚未成功找到任何适合我需求的优秀文章/项目。主要是因为我也想使用 javascript 而不是 Coffeescript。如果有人有任何可以帮助我的资源或想法，请发送。

现在我已经查看了以下内容:

https://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails https://egghead.io/lessons/angularjs-rails-todo-api-part-1

Answer 1

我根据这个 fiddle 创建了一个类似于您所描述的 Angular 过滤器，并在它来自的线程的帮助下。希望这些对您有用...

http://jsfiddle.net/rzgWr/19/

Filter Array Using Checkboxes with AngularJS

var myApp = angular.module('myApp',[]);

var uniqueItems = function (data, key) {
var result = [];

for (var i = 0; i < data.length; i++) {
    var value = data[i][key];

    if (result.indexOf(value) == -1) {
        result.push(value);
    }

}
return result;
};

function MyCtrl($scope, filterFilter) {
$scope.usePants = {};
$scope.useShirts = {};
$scope.useShoes = {};

$scope.players = [
    {name: 'Bruce Wayne', shirt: 'XXL', pants: '42', shoes: '12'},
    {name: 'Wayne Gretzky', shirt: 'XL', pants: '38', shoes: '10'},
    {name: 'Michael Jordan', shirt: 'M', pants: '32', shoes: '9'},
    {name: 'Rodman', shirt: 'XSXL', pants: '42', shoes: '11'},
    {name: 'Jake Smitz', shirt: 'XXL', pants: '42', shoes: '12'},
    {name: 'Will Will', shirt: 'XXLL', pants: '42', shoes: '12'},
    {name: 'Youasdf Oukls', shirt: 'XL', pants: '38', shoes: '10'},
    {name: 'Sam Sneed', shirt: 'XL', pants: '38', shoes: '10'},
    {name: 'Bill Waxy', shirt: 'M', pants: '32', shoes: '9'},
    {name: 'Javier Xavior', shirt: 'M', pants: '32', shoes: '9'},
    {name: 'Bill Knight', shirt: 'M', pants: '32', shoes: '9'},        
    {name: 'One More', shirt: 'M', pants: '32', shoes: '9'},        
    {name: 'Player One', shirt: 'XXL', pants: '42', shoes: '11'},
    {name: 'Space Cadet', shirt: 'XXL', pants: '42', shoes: '12'},
    {name: 'Player Two', shirt: 'XXXXL', pants: '42', shoes: '12'}
]; 

// Watch the pants that are selected
$scope.$watch(function () {
    return {
        players: $scope.players,
        usePants: $scope.usePants,
        useShirts: $scope.useShirts,
        useShoes: $scope.useShoes
    }
}, function (value) {
    var selected;

    $scope.count = function (prop, value) {
        return function (el) {
            return el[prop] == value;
        };
    };

    $scope.pantsGroup = uniqueItems($scope.players, 'pants');
    var filterAfterPants = [];        
    selected = false;
    for (var j in $scope.players) {
        var p = $scope.players[j];
        for (var i in $scope.usePants) {
            if ($scope.usePants[i]) {
                selected = true;
                if (i == p.pants) {
                    filterAfterPants.push(p);
                    break;
                }
            }
        }        
    }
    if (!selected) {
        filterAfterPants = $scope.players;
    }

    $scope.shirtsGroup = uniqueItems($scope.players, 'shirt');
    var filterAfterShirts = [];        
    selected = false;
    for (var j in filterAfterPants) {
        var p = filterAfterPants[j];
        for (var i in $scope.useShirts) {
            if ($scope.useShirts[i]) {
                selected = true;
                if (i == p.shirt) {
                    filterAfterShirts.push(p);
                    break;
                }
            }
        }       
    }
    if (!selected) {
        filterAfterShirts = filterAfterPants;
    }

    $scope.shoesGroup = uniqueItems($scope.players, 'shoes');
    var filterAfterShoes = [];        
    selected = false;
    for (var j in filterAfterShirts) {
        var p = filterAfterShirts[j];
        for (var i in $scope.useShoes) {
            if ($scope.useShoes[i]) {
                selected = true;
                if (i == p.shoes) {
                    filterAfterShoes.push(p);
                    break;
                }
            }
        }    
    }
    if (!selected) {
        filterAfterShoes = filterAfterShirts;
    }        

    $scope.filteredPlayers = filterAfterShoes;        
}, true);


$scope.$watch('filtered', function (newValue) {
    if (angular.isArray(newValue)) {
        console.log(newValue.length);
    }
}, true);    
}

myApp.filter('count', function() {
return function(collection, key) {
  var out = "test";
  for (var i = 0; i < collection.length; i++) {
      //console.log(collection[i].pants);
      //var out = myApp.filter('filter')(collection[i].pants, "42", true);
  }
  return out;
}
});


myApp.filter('groupBy',
        function () {
            return function (collection, key) {
                if (collection === null) return;
                return uniqueItems(collection, key);
    };
});