Question

我正在使用AngularJS，并且正在显示带有ng-repeat的列表。我想要实现的是过滤列表，仅显示包含用户在输入中写入的值的项目。

我像发现here的示例一样进行设置，但没有成功。

HTML：

<div ng-if="result.length > 0">
    <input type="text" class="pl-4" ng-model="searchText" placeholder="Search" />

    <div class="mt-4 text-left animationIf" ng-repeat="item in result | filter: searchText">
        <div>
            <span class="text-danger">Name: </span>
            <span class="m-0" ng-bind="item.name"></span>
        </div>
        <div>
            <span class="text-danger">Country: </span>
            <span class="m-0" ng-bind="item.country"></span>
        </div>
        <div>
            <span class="text-danger">Born: </span>
            <span class="m-0" ng-bind="item.born"></span>
        </div>
        <div>
            <span class="text-danger">Surnname: </span>
            <span class="m-0" ng-bind="item.surname"></span>
        </div>
    </div>
</div>

结果对象的示例如下：

$scope.result = [{
    name: "John",
    country: "California ",
    born: "283 AC",
    surname: "Snow"
},{
    name: "Michael",
    country: "US",
    born: "1958",
    surname: "Jackson"
}];

如果我在ng-init="$scope.result = 'John'"处给出过滤器，则该过滤器将工作并仅显示包含“ John”的项目，但是如果以后我将输入中的值更改为“ Michael”，则它将不起作用。没有过滤条件。

我在这里做什么错了？

Answer 1

var app = angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
$scope.result = [{
    name: "John",
    country: "California ",
    born: "283 AC",
    surname: "Snow"
},{
    name: "Michael",
    country: "US",
    born: "1958",
    surname: "Jackson"
}];

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<input type="text" class="pl-4" ng-model="searchText" placeholder="Search" />
<body ng-app="testApp" ng-controller="testCtrl">
 <div class="mt-4 text-left animationIf" ng-repeat="item in result | filter: searchText">
    <div>
        <span class="text-danger">Name: </span>
        <span class="m-0" ng-bind="item.name"></span>
    </div>
    <div>
        <span class="text-danger">Country: </span>
        <span class="m-0" ng-bind="item.country"></span>
    </div>
    <div>
        <span class="text-danger">Born: </span>
        <span class="m-0" ng-bind="item.born"></span>
    </div>
    <div>
        <span class="text-danger">Surnname: </span>
        <span class="m-0" ng-bind="item.surname"></span>
    </div>
</div>

Answer 2

您的代码按原样工作。问题发生在NgInit中，在这里您将范围对象结果设置为仅“ John”，这不是一个数组，并且无法与NgRepeat配合使用。

所以不要设置$scope.result = 'John'，一切都会正常

angular.module("app",[])
.controller("myCtrl", function($scope){
$scope.result = [{
    name: "John",
    country: "California ",
    born: "283 AC",
    surname: "Snow"
},{
    name: "Michael",
    country: "US",
    born: "1958",
    surname: "Jackson"
}];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>

<div ng-app="app" ng-controller="myCtrl">
<input type="text" class="pl-4" ng-model="searchText" placeholder="Search" />

<div class="mt-4 text-left animationIf" ng-repeat="item in result | filter: searchText">
    <div>
        <span class="text-danger">Name: </span>
        <span class="m-0" ng-bind="item.name"></span>
    </div>
    <div>
        <span class="text-danger">Country: </span>
        <span class="m-0" ng-bind="item.country"></span>
    </div>
    <div>
        <span class="text-danger">Born: </span>
        <span class="m-0" ng-bind="item.born"></span>
    </div>
    <div>
        <span class="text-danger">Surnname: </span>
        <span class="m-0" ng-bind="item.surname"></span>
    </div>
</div>
</div>

Answer 3

我看不到您的代码有任何问题。但是请不要使用ng-init命令，就像被修饰的那样：

ng-init =“ $ scope.result ='约翰'”

此命令正在清除您在控制器中创建的阵列。

Answer 4

我有一个外部DIV，其中有ng-if="result.length > 0“，因此仅当填充结果时才显示。这使得输入根本无法正常工作。

删除ng-if并改为放置ng-show，解决了我的问题。

AngularJS ng-repeat过滤器无法与输入和ng-model一起正常工作

4 个答案: