角度自动完成输入字段旁边的巨大清晰图标

时间:2016-11-16 13:11:48

标签: javascript angularjs autocomplete

当我使用角度md-autocomplete并且不确定原因时,我得到了一个巨大的清晰按钮。

这是它的样子:

Huge Clear Button

我正在使用这个小提琴创建自动填充:md-autocomplete example

我的HTML:

<div ng-app="myApp">
<div class="form-horizontal" role="form" ng-controller="MainController" ng-cloak>

<md-autocomplete md-selected-item="selectedItem"
                 md-search-text="searchText"
                 md-items="item in getMatches(searchText)"
                 md-item-text="item.display"
                 md-min-length="0"
                 placeholder="Type something">
    <md-item-template>
        <span md-highlight-text="searchText">{{item.display}}</span>

    </md-item-template>
    <md-not-found>No matches found.</md-not-found>
</md-autocomplete>
<p>Test case type ca</p>
</div>
</div>

JS文件:

(function () {
var app = angular.module('myApp', ['ngMaterial','ngAnimate', 'ui.bootstrap']);


// Main COntroller
app.controller('MainController', ["$scope", "$http", function ($scope, $http) {


    $scope.myDta = [{
        value: "apple",
        display: "apple"
    }, {
        value: "banana",
        display: "banana"
    }, {
        value: "gauva",
        display: "gauva"
    }, {
        value: "melon",
        display: "melon"
    }, {
        value: "potato",
        display: "potato"
    }, {
        value: "carrot",
        display: "carrot"
    }, {
        value: "cauliflower",
        display: "cauliflower"
    }, {
        value: "jasmine",
        display: "jasmine"
    }, {
        value: "cabbage",
        display: "cabbage"
    }, {
        value: "peas",
        display: "peas"
    }];


    $scope.getMatches = function (text) {
        text = text.toLowerCase();
        var ret = $scope.myDta.filter(function (d) {
            return d.display.startsWith(text);
        });
        return ret;
    };

}]);

})();
BundleConfig.cs中的

(加载脚本):

            bundles.Add(new ScriptBundle("~/bundles/angular").Include(
                    "~/Scripts/angular.js",
                    "~/Scripts/angular-animate.js",
                    "~/Scripts/angular-touch.js",
                    "~/Scripts/angular-aria.js",
                    "~/Scripts/angular-material.js"));

IE和Chrome都存在问题。任何帮助将不胜感激!

0 个答案:

没有答案