Angular UI Typeahead不工作 - 没有错误

我有一些问题得到提前输入字段的工作。我想我已经包含了所有的依赖关系，并正确地将它连接起来。它使用静态数组，所以不应该有任何数据问题。Angular UI Typeahead不工作 - 没有错误

没有错误被返回，所有的JS文件似乎已经正确加载，因此我不知道为什么它不工作。

我创建了一个plunkr来演示这一点。

这里是我的实际生产代码

<script src="https://code.angularjs.org/1.2.29/angular.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap.js"></script> 
<script src="@Url.Content("~/Scripts/TaggedObjectTagEditorSPA.js")"></script> 

<div ng-app="mybookwise" ng-controller="taggedObjectTagEditorSPA as ctrl"> 
    <div class="panel panel-default"> 
    <div class="panel-heading">Tags</div> 
    <div class="panel-body"> 
     <p class="tagContainer"> 
      <span ng-repeat="tag in ctrl.assignedTags"><a ng-click="ctrl.remove($index)" class="label label-primary label-pill tag">{{tag.Name}} <span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>&nbsp;<wbr></span> 
     </p> 
    </div> 
    <div class="panel-footer"> 
     <div class="form-group form-inline"> 
      <input type="text" ng-model="ctrl.selectedTag" uib-typeahead="tag for tag in ctrl.existingTagNames | filter:$viewValue | limitTo:8" class="form-control" ng-keyup="$event.keyCode == 13 && ctrl.add()">&nbsp;<button type="button" class="btn btn-default" ng-click="ctrl.add()">Add</button> 
     </div> 
    </div> 
</div> 
</div>

TaggedObjectTagEditorSPA.ts

module mybookwise { 
    'use strict'; 

    export class TaggedObjectTagEditorSPA { 
     existingTags = []; 
     existingTagNames = []; 
     selectedTag: string; 
     assignedTags = []; 
     httpService: any; 
     baseUrl: string; 

     static $inject = ['$http']; 

     constructor(private $http: ng.IHttpService) { 
      this.loadJson(); 
      this.selectedTag = ""; 
     } 

     add() { 
      var self = this; 

      for (var i = 0; i < self.existingTags.length; i++) { 
       if (self.existingTags[i].Name == self.selectedTag) { 
        self.assignedTags.push({ 
         "Id": self.existingTags[i].Id, 
         "Name": self.existingTags[i].Name 
        }); 
        self.selectedTag = ""; 
        return; 
       } 
      } 
      self.assignedTags.push({ 
       "Id": "", 
       "Name": self.selectedTag 
      }); 
      self.selectedTag = ""; 
     } 

     remove(index) { 
      var self = this; 
      self.assignedTags.splice(index, 1); 
     } 

     private loadJson() { 
      var existingTags = angular.fromJson($('#existingTags').html()); 
      this.existingTags = existingTags; 
      var assignedTags = angular.fromJson($('#assignedTags').html()); 
      this.assignedTags = assignedTags; 
      this.copyTagsToTagNameArray(); 
     } 

     private copyTagsToTagNameArray() { 
      for (var i = 0; i < this.existingTags.length; i++) { 
       this.existingTagNames.push(this.existingTags[i].Name); 
      } 
     } 
    } 

    angular.module('mybookwise', ['ui.bootstrap']) 
     .controller('taggedObjectTagEditorSPA', TaggedObjectTagEditorSPA); 
}

来源

2016-03-15 Jason Underhill

只是要添加。当页面加载时，existingTags和existingTagsNames数组将被填充。我已经在Chrome中使用AngularJS插件进行了检查。 –

'0.12.0'是uib-bootstrap的老版本。我不认为'uib-typeahead'对于那个版本是正确的。可能值得更新或阅读该版本的文档。 – Ankh

在工作中支持IE8的乐趣！好的，谢谢，我会检查一下。 –

uib-typeahead在角UI更高版本中引入的。在这个版本（0.12.0）中，它应该是typeahead

来源

2016-03-15 11:03:41

它在0.14.0中引入。 – mjwrazor

Angular UI Typeahead不工作 - 没有错误

回答

相关问题