MaterializeCSS添加自動完成場動態地

我使用MaterializeCSS 0.9.8（與角兌現指令）和角度1.5.0MaterializeCSS添加自動完成場動態地

我的目標是在一個表中生成一些行，每行那些需要有一個自動完成基本一致自動完成數據（用戶列表），但我不能讓這些工作....

這裏是我走到這一步，我已經做了一個小例子，顯示我的問題的代碼。

HTML

<!DOCTYPE html> 

<html lang="en" ng-app="myApp" class="no-js"> 

<head> 
    <!--Import Google Icon Font--> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <!--Import materialize.css--> 
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" media="screen,projection" /> 

    <!--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="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script> 

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-materialize/0.2.2/angular-materialize.min.js"></script> 

    <script type="text/javascript" src="test.js"></script> 
</head> 
<body> 

<div ng-controller="myController" ng-init="getUsers()"> 
    <table> 
     <thead> 
     <tr> 
      <th>User</th> 
      <th>login</th> 
     </tr> 
     </thead> 

     <tbody> 
     <tr style ="border : 1px solid silver" ng-repeat="a in accesses"> 
      <td> 
       <input type="text" placeholder="User" class="autocompleteUser" ng-model='a.fullName'> 
      </td> 
      <td>{{a.login}}</td> 
     </tr> 
     </tbody> 
    </table> 
    <a id="addButton" ng-click="addAccess()" href="#">Add user</a> 
    {{accesses}} 
</div> 



</body> 
</html>

test.js

'use strict'; 

$(document).ready(function() { 
    $('select').material_select(); 
}); 

// Declare app level module which depends on views, and components 
var module = angular.module('myApp', ['ui.materialize']) 

.controller('myController', ['$scope', function($scope) { 

    $scope.users = [ 
     {login : 'jdoe', fullName : 'John Doe'}, 
     {login : 'fbar', fullName : 'Foo Bar'}, 
     {login : 'mmax', fullName : 'Mad Max'} 
    ]; 

    $scope.accesses = []; 

    /** 
    * Add a new access to the table 
    */ 
    $scope.addAccess = function() { 
     $scope.accesses.push({ 
      login : '', 
      fullName : '' 
     }); 
    }; 


    /** 
    * Get all users in the DB 
    */ 
    $scope.getUsers = function() { 
     //Simulate HTTP request 
     $scope.usersAutocomplete = { 
      'John Doe' : null, 
      'Foo Bar' : null, 
      'Mad Max' : null 
     }; 

     $('input.autocomplete').autocomplete({ 
      data: $scope.usersAutocomplete, 
      limit: 20, 
      onAutocomplete: function(val) { 
       $scope.getUserByName(val); 
      }, 
      minLength: 1 
     }); 
    }; 

    /** 
    * Get a user given his name and surname 
    * @param fullName name + surname 
    */ 
    $scope.getUserByName = function (fullName) { 
     var row = $scope.users.filter(function (user) { 
      return user.fullName === fullName; 
     }); 
     //Assign row.login here 
    }; 

}]);

如果我初始化場部分自動完成，工程....但如果我動態地宣佈這些領域（就像我在我的表格中添加一行時那樣）。

有沒有辦法讓這個動態地或至少一種變通方法工作呢？

感謝

編輯

我試圖插入線Materialize.updateTextFields（），但仍然沒有工作...

來源

2017-08-01 Alexi Coard

有隻差2-3的東西，你需要更新：

1）您對每一個你動態地添加新的領域時運行.autocomplete（）函數。爲此，只需創建一個函數爲dom上的每個字段執行自動完成。（調用它只執行一次ng-repeat中的第一個字段）。功能可以是：

$scope.runAutocomplete = function(){ 
    $timeout(function(){ 
     $("input.autocomplete").autocomplete({ 
      data: $scope.usersAutocomplete 
     }); 
    }); 
}

所以addaccess功能應該是：

$scope.addAccess = function() { 
     $scope.accesses.push({ 
      login : '', 
      fullName : '' 
     }); 
     $scope.getUsers(); 
     $scope.runAutocomplete(); 
    };

這裏timeout僅僅是足夠小的時間，以確保您的新對象推&元素在DOM創建由ng-repeat。如果在實時youre去在getUsers()調用服務，那麼你應該在回調函數執行$scope.runAutocomplete()。

2）在你的CSS物質化圖書館的版本有一些問題&從而在某種程度上它給風格display沒有& opacity 0至.dropdown內容這是自動完成的重要組成部分，因此您可以通過在特定視圖覆蓋它處理CSS。

還有就是像其他小事情，在不同的文件中或者在不同的腳本標記角度&非角碼，module是angularjs關鍵字使用它作爲變量名迴避。此外，你拼錯類名，輸入元素上一個不一樣的你調用autocomplete()期間選擇使用內部控制器JQ選擇什麼。

這是你的代碼的工作版本：https://plnkr.co/edit/EdP5cw7R5bADRMgnHfA9?p=preview

（我用的最低配置只是爲了運行它的目的，你可以在你的實際應用具有用於自動完成&其他組件的其他詳細配置項目整合）

來源

2017-08-04 17:02:19 Shantanu

感謝您的回答，它工作得很好！我離解決方案並不遙遠，但我從來沒有料到CSS會出現問題... –

@Alexi Coard歡迎:)。始終嘗試通過更新庫來解決問題。我得到賞金嗎？ ;） – Shantanu

當然，你會得到這個賞金;）。我將下載Materialise的工作版本並從文件系統提供。將在未來更容易 –

MaterializeCSS添加自動完成場動態地

回答

相關問題