0
所以我有一個輸入的元素,讓我做以下內數組定義的關鍵字:對角$範圍/陣列的indexOf()需要找到一個字符串
- 過濾器 - 工程
- 在使用回車鍵時,它附加/推送到$ Scope/Array - Works
- 標識輸入和警報字符串中的關鍵字 - 不起作用 3.1如果我只鍵入關鍵字,例如「bguser」 3.2如果我輸入的關鍵字不多,例如「Simon Edwards bguser」
的關鍵字數組是當前定義的內聯
$scope.checkKeyword = function() { var elem = {name: $scope.addName.name}; if (['bguser', 'bgadmin'].indexOf(elem.name) >= 0) { alert(elem.name); }
};
,但我想它注入可能的話從$ scope.keywordlist
$scope.keywordlist = [
{name: 'bguser'},
{name: 'bgadmin'},
];
我需要幫助得到這個( 3)& 4)工作。我已在在Fiddle
<!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-keyup="checkKeyword()" ng-model="addName.name" 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 class="col-xs-3 col-sm-3 col-md-3">Tag</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 class="col-xs-3 col-sm-3 col-md-3">{{ item.tag }}</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>
JS
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', '$filter', function($scope, $filter) {
$scope.title = 'Recent Activity';
$scope.list = [
{name: 'User 1', tag: 'bgUser'},
{name: 'Admin 1', tag: 'bgAdmin'},
{name: 'Service 1', tag: ''},
{name: 'Project 1', tag: ''},
{name: 'Configuration Item 1', tag: ''},
{name: 'Task 1', tag: ''},
{name: 'Incident 1', tag: ''},
{name: 'Issue 1', tag: ''},
{name: 'Known Issue 1', tag: ''},
{name: 'Problem 1', tag: ''},
{name: 'Knowledge Base 1', tag: ''},
{name: 'Update 1', tag: ''},
{name: 'Document 1', tag: ''},
];
$scope.keywordlist = [
{name: 'bguser'},
{name: 'bgadmin'},
];
$scope.addItem = function() {
var elem = {name: $scope.addName.name};
if ($filter('filter')($scope.list, {name: elem.name}).length == 0) {
$scope.list.push(
elem
);
//alert(elem.name);
}
};
$scope.checkKeyword = function() {
var elem = {name: $scope.addName.name};
if (['bguser', 'bgadmin'].indexOf(elem.name) >= 0) {
alert(elem.name);
}
};
}]);
工程就像一個魅力。謝謝。我似乎得到了一個雙重警報,但是,1.當鍵入關鍵字(我需要這個),2.當我按Enter/Return鍵(不需要這個)。這可能是由於ng-keyup,你知道如何告訴ng-keyup忽略輸入/返回鍵嗎? – ssedwards
沒關係我已經設法解決這個問題:-)當我設置$ scope.addName.name =「」;在推完成之後,它停止了雙重警報。再次感謝。 – ssedwards