материализовать автозаполнение не работает с угловым

Когда я удаляю materialize.min.js из home.html автозаполнения работает. Является ли это материализацией проблемы или я делаю что-то неправильно?материализовать автозаполнение не работает с угловым

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 недвижимость. Материализация ver. 97,7

источник

2016-10-28 miuosh

Я знаю, что мой ответ запаздывает, но и для тех, кто придет сюда ...

У меня была та же проблема, пока я не решил использовать materializeCss автозаполнения вместо Jquery-интерфейса один

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

в $ сфера .newTask.category данные должны выглядеть следующим образом:

{ 'category1': нулевой, 'category2': нулевой, 'category3': нулевой, 'category4': нулевой}

источник

2016-12-28 07:53:20

Вы используете как Jquery UI- и Материализация, оба имеют функцию автозаполнения и могут противоречить друг другу. Попробуйте удалить и повторите попытку. Помните, что у них разный синтаксис.

источник

2017-04-11 14:07:18

Оставьте вопрос «Когда я удаляю materialize.min.js из home.html autocomplete works». Вы не решаете вопрос. Но у вас есть действительная точка от двойного использования. Вы должны расширить свой ответ на этот вопрос, поскольку вопрос сводится к этому. – Tensibai

материализовать автозаполнение не работает с угловым

ответ

Смежные вопросы