我正在使用AngularJS，并显示一个带有ng repeat的列表。我试图实现的是过滤列表，只显示包含用户在输入中写入的值的项目。
我像这里的例子一样设置了它，但没有成功。
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"，它将不会起任何作用。不适用任何筛选器。
我在这里做错了什么？
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>您的代码按原样运行。。问题发生在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>我认为您的代码没有任何问题。但不要像你指导的那样使用ng-init命令：
ng init="$scope.result='John'">
此命令将清除您在控制器中创建的阵列。
我有一个外部div，它有ng-if="result.length > 0"，所以它只在我填充结果时显示。这使得输入根本不起作用。
去掉ng-if，改为放ng-show，解决了我的问题。