2015-04-14 68 views
0

所以我有一個輸入的元素,讓我做以下內數組定義的關鍵字:對角$範圍/陣列的indexOf()需要找到一個字符串

  1. 過濾器 - 工程
  2. 在使用回車鍵時,它附加/推送到$ Scope/Array - Works
  3. 標識輸入和警報字符串中的關鍵字 - 不起作用 3.1如果我只鍵入關鍵字,例如「bguser」 3.2如果我輸入的關鍵字不多,例如「Simon Edwards bguser」
  4. 的關鍵字數組是當前定義的內聯

    $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

下面你可以enuamrate關鍵字列表,並檢查當前關鍵字是你的輸入範圍內:

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

+0

工程就像一個魅力。謝謝。我似乎得到了一個雙重警報,但是,1.當鍵入關鍵字(我需要這個),2.當我按Enter/Return鍵(不需要這個)。這可能是由於ng-keyup,你知道如何告訴ng-keyup忽略輸入/返回鍵嗎? – ssedwards

+0

沒關係我已經設法解決這個問題:-)當我設置$ scope.addName.name =「」;在推完成之後,它停止了雙重警報。再次感謝。 – ssedwards

相關問題