Question

标题

您好，我的Angular.js控制器中有这个带有对象的$ scope数组：

$scope.recipes = [
 {
 name :"Ceasar Salad",
 ingredients:["chicken","lettuce"],
 time:"8'"
 },
 {
 name :"Lupus Salad",
 ingredients:["lupus","lettuce"],
 time:"18'"
 }

然后我在$ scope.recipe

中重复ech对象

ul(ng-repeat="r in recipes | filter:ingredient")
 li
  h3{{r.name}}
  i(class="fa fa-clock-o")
  span{{r.time}}
  i(ng-class="heart" ng-click="change()")

并使用此输入和ng-model在我的ng-repeat中过滤

input(type="text" ng-model="ingredient")

问题是。我怎样才能只过滤每个＆＃34;成分中的单词＆＃34;每个物体的属性。

感谢。

Answer 1

将ng-model更改为ingredient.ingredients。

input(type="text" ng-model="ingredient.ingredients")

如果您想要严格的相等更改过滤器：过滤成分：成分：true

ul(ng-repeat="r in recipes | filter:ingredient:true")

请看this。

Answer 2

通过我的ng-model输入，在每个对象中找到属性“ingredients”。

input(ng-model="ingredient.ingredients")
enter code here

然后，当我在ng-repeat列表中添加一个过滤器选项时，我只能在输入标签中找到包含相同成分的对象。

ul(ng-repeat="r in recipes | filter:ingredient")

如果您有同样的问题，我希望能帮助您

Answer 3

这种过滤方式会降低您的运行速度。更好的过滤就像：

在控制器中：

$scope.recipes = [
        {
            name: "Ceasar Salad",
            ingredients: ["chicken", "lettuce"],
            time: "8'"
        },
        {
            name: "Lupus Salad",
            ingredients: ["lupus", "lettuce"],
            time: "18'"
        }
    ];

$scope.ingredient = "";

$scope.filterByIngredient = function () {
    $scope.filteredRecipes = $scope.ingredient.length ? $filter('filter')($scope.recipes, function (r) {
        return r.ingredients.indexOf($scope.ingredient) > -1;
    }) : $scope.recipes;
};

$scope.filterByIngredient();

在视图中：

<ul ng-repeat="r in filteredRecipes">
    <li>
        <h3>{{r.name}}</h3>
        <i class="fa fa-clock-o"></i>
        <span>{{r.time}}</span>
        <i ng-class="heart" ng-click=""></i>
    </li>
</ul>

<input type="text" ng-model="ingredient" ng-change="filterByIngredient()" />

如果你在视图中进行过滤，角度会在每个摘要周期中进行过滤，但是除非＆＃34;成分＆＃34;变化。所以，最好在控制器中完成它。

使用Angular.js过滤包含对象的数组

标题

3 个答案: