我有一个数组，当我在输入框中键入内容时，该数组会被过滤/搜索。当我按回车键时，输入文本将附加到数组中。这一切都很棒并且有效。
不起作用的是 $scope.list.indexOf() == -1 ，它应该阻止我输入重复项。但它不起作用。
我哪里出错了？
HTML
<!doctype html>
<html ng-app="bgApp">
<head>
<title>List & Tag</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Local CSS -->
<link rel="stylesheet" type="text/css" href="./static/css/dev-style.css" />
</head>
<body>
<div ng-controller="listController">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 div-title">
<div class="col-xs-6 col-sm-6 col-md-6">
<h1><small>{{title}}</small></h1>
<input type="text" ng-enter="addItem()" ng-model="addName" class="search-query" placeholder="Search">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 div-title">
<div class="col-xs-3 col-sm-3 col-md-3">Name of Item</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 div-row" ng-repeat="item in list | filter:addName">
<div class="col-xs-3 col-sm-3 col-md-3">{{ item.name }}</div>
</div>
</div>
</div>
<!-- AngularJS scripts from CDN -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-resource.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-animate.min.js"></script>
<!-- JQuery scripts from CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Bootstrap scripts compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Locally installed scripts -->
<script src="./js/bgapp.js"></script>
</body>
</html>
APP、指令和 Controller
var bgapp = angular.module('bgApp', [])
.directive('ngEnter', function () {
return function (scope, element, attrs) {
element.bind("keydown keypress", function (event) {
if (event.which === 13) {
scope.$apply(function () {
scope.$eval(attrs.ngEnter, {
'event': event
});
});
event.preventDefault();
}
});
};
});
bgapp.controller('listController', ['$scope', function($scope) {
$scope.title = 'Recent Activity';
$scope.list = [
{name: 'User 1'},
{name: 'Admin 1'},
{name: 'Service 1'},
{name: 'Project 1'},
{name: 'Configuration Item 1'},
{name: 'Task 1'},
{name: 'Incident 1'},
{name: 'Issue 1'},
{name: 'Known Issue 1'},
{name: 'Problem 1'},
{name: 'Knowledge Base 1'},
{name: 'Update 1'},
{name: 'Document 1'},
];
$scope.addItem = function() {
var elem = {name: $scope.addName};
if ($scope.list.indexOf(elem) == -1) {
$scope.list.push(
elem
);
}
};
}]);
最佳答案
由于 $scope.list 是 Object 的列表，因此测试 $scope.list.indexOf(elem) 可以使用以下引用: 2 个Object，它们总是不同的。
您可以使用 AngularJS 中的 $filter('filter')(array, expression, comparator) :
$scope.addItem = function() {
var elem = {name: $scope.addName};
if ($filter('filter')($scope.list, {name: elem.name}).length == 0) {
$scope.list.push(
elem
);
}
};
关于javascript - 当推送到数组时，indexOf() == -1 似乎不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29595704/