實現自動完成不能與角度工作

當我從home.html autocomplete作品中刪除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財產。實現ver。 97.7

來源

2016-10-28 miuosh

我知道我的回答是遲，但對於那些誰還會來這裏...

我有同樣的問題，直到我決定用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 }); 
    } 
};});

的$範圍.newTask.category數據應該是這樣的：

{ '類別1'：空， '類別2'：空， '類別3'：空， '類別4'：空}

來源

2016-12-28 07:53:20

您同時使用jQuery的UI 和實現化，兩者都具有自動完成功能，並可能相互衝突。嘗試刪除並重試。記住它們有不同的語法。

來源

2017-04-11 14:07:18

Op通過'當我從home.html autocomplete作品中刪除materialize.min.js'開始提問。你並沒有真正解決這個問題。但是，從雙重用法來看，你有一個有效的觀點。你應該擴大你的答案，因爲這個問題歸結爲這個問題。 – Tensibai

實現自動完成不能與角度工作

回答

相關問題