Question

我在使用提前输入字段时遇到了一些问题。我想我已经包含了所有的依赖项并且正确地连接了它。它使用静态数组，因此不应存在任何数据问题。

没有返回任何错误，并且所有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);
}

Answer 1

uib-typeahead是在Angular UI的更高版本中引入的。在此版本（0.12.0）中，它应为typeahead

Angular UI Typeahead不起作用 - 没有错误

1 个答案: