Question

当我从home.html自动完成功能中删除materialize.min.js时。是实现问题还是我做错了什么？

home.html的

<!DOCTYPE html>
<html ng-app="timeTracker">
    <head>
        <title>TimeTracker</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <!--Import Google Icon Font-->
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="materialize/css/materialize.min.css"  media="screen,projection"/>
        <link type="text/css" rel="stylesheet" href="stylesheets/style.css" />
        <link href="/src/css/angular-datepicker.css" rel="stylesheet" type="text/css" />

    </head>
    <body ng-controller="containerCtrl" >

        <div class="container" id="mainContainer">
        <div ng-view></div>         

        </div><!--- container -->
        <footer>
            <br />
        </footer>
        <!--Import jQuery before materialize.js-->

      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script type="text/javascript" src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
      <script type="text/javascript" src="materialize/js/materialize.min.js"></script>

      <script type="text/javascript" src="/angular.js"></script>
     <script type="text/javascript" src="/angular-resource.js"></script>
     <script type="text/javascript" src="/angular-route.js"></script>
      <script type="text/javascript" src="javascripts/home.js"></script>

    </body>
</html>

这是taskView.html。

                <div class="input-field col s3">
                    <input id="input_text" type="text" name="category" ng-model="newTask.category"
                     class="autocomplete" ui-items="categories" auto-complete >
                    <label for="input_text">Category...</    
                </div>

home.js

var app = angular.module("timeTracker", ["ngResource", "ngRoute"])
.controller("containerCtrl") {
    /**
     * Autocomplete
     */
    $scope.categories = [
        "Test", "Configuration", "Install" ];

})
.directive('autoComplete', function($timeout) {
    return function(scope, element, attrs) {

        console.log(scope[attrs.uiItems]);
        element.autocomplete({
            source: scope[attrs.uiItems],
            select: function() {
                $timeout(function() {
                    element.trigger('input');
                }, 0);
            }
        });
    };
});

范围[attrs.uiItems]记录$ scope.categories属性。实现版本。 97.7

Answer 1

我知道我的答案很晚，但对于那些来这里的人来说......

我遇到了同样的问题，直到我决定使用materializeCss自动完成而不是jquery-ui

HTML

<div class="input-field col s3">
     <input type="text" name="category" ng-model="newTask.category" class="autocomplete" auto-complete>
      <label for="input_text">Category...</label>    
</div>

指令

.directive("autoComplete", function () {
  return  {
    restrict: 'A',
    scope: true,
    link: function($scope, elem, attr) {
            elem.autocomplete({ data: $scope.newTask.category });
    }
};});

$ scope.newTask.category数据应如下所示：

{＆＃39; category1＆＃39;：null，＆＃39; category2＆＃39;：null，＆＃39; category3＆＃39;：null，＆＃39; category4＆＃39;：null}

Answer 2

您同时使用Jquery-UI 和 Materialise，两者都具有自动完成功能，并且可能相互冲突。尝试删除其中一个并重试。记住他们有不同的语法。

物化自动完成不使用角度

2 个答案: