Question

所以我有一个输入元素，允许我执行以下操作：

过滤Angular $ Scope / Array - Works
使用Enter键时，它会追加/推送到$ 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＆amp; 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);
        }  
    };

}]);

Answer 1

您可以打算关键字列表，并检查当前关键字是否在您的输入中：

var elem = {name: $scope.addName.name};
    angular.forEach($scope.keywordlist, function(keyword) {
    console.log(0);
    if (elem.name.indexOf(keyword.name) > -1)
        alert(elem.name);
});

请参阅此fiddle

indexOf（）需要在字符串中查找数组中定义的关键字

1 个答案: