CODEWITHSUNDEEP
jqueryangularjsmaterialize
miuosh
miuosh

Reputation: 906

materialize autocomplete not working with angular

When I remove materialize.min.js from home.html autocomplete works. Is it materialize problem or am I doing something wrong?

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>

Here is 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);
            }
        });
    };
});

scope[attrs.uiItems] logs $scope.categories property. Materialize ver. 97.7

Upvotes: 1

Views: 1488

Answers (2)

Thibauld nuyten
Thibauld nuyten

Reputation: 1

You're using both Jquery-UI and Materialize, both have a autocomplete function and may be conflicting with each other. Try removing either and try again. Remember they have different syntax.

Upvotes: 0

Marvine Bamba
Marvine Bamba

Reputation: 162

I know my answer is late but for those who will come here...

I had the same problem until i decided to use the materializeCss auto complete instead of the jquery-ui one

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

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

The $scope.newTask.category data should look like:

{'category1': null, 'category2': null, 'category3': null, 'category4': null}

Upvotes: 5

Related Questions