我正在使用 MaterializeCSS 0.9.8(带有 Angular-materialize 指令)和 Angular 1.5.0
我的目标是在表中生成一些行，每一行都需要具有基本相同的自动完成数据(用户列表)的自动完成功能，但我无法让它们工作......
这是我到目前为止得到的代码，我做了一个小例子来展示我的问题。
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() 但仍然不起作用。
最佳答案
您只需更新 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是足够短的时间来确保你的新对象被推送并且元素是通过ng-repeat在dom上创建的。如果您要实时调用 getUsers() 中的服务，那么您应该在其回调函数中执行 $scope.runAutocomplete() 。
2)在您的css具体化库版本中存在一些问题，因此它以某种方式将样式 display none 和 opacity 0 赋予 .dropdown-content ，这是 .dropdown-content 的重要组成部分自动完成，因此您可以通过在特定 View css 中覆盖它来处理它。
还有其他一些小事情，例如，在不同的文件或不同的脚本标签中包含 Angular 和非 Angular 代码，module是 angularjs 中的关键字，避免将其用作变量名。另外，您拼写错误的类名，输入元素上的类名与您在调用 autocomplete() 期间使用 Controller 内的 jq 选择器选择的内容不同。
这是代码的工作版本:https://plnkr.co/edit/EdP5cw7R5bADRMgnHfA9?p=preview
(我使用了最低配置只是为了运行它，您可以将其集成到实际应用程序中，并为自动完成和其他组件提供其他详细配置项)
关于jquery - MaterializeCSS 动态添加自动完成字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45441351/