MaterializeCSS动态添加自动完成字段
我使用的是MaterializeCSS 0.9.8 (带有角物化指令)和角1.5.0
我的目标是在一个表中生成一些行，这些行中的每个行都需要一个具有基本相同的自动完成数据(用户列表)的自动完成，但是我无法让这些行工作.
这是我到目前为止得到的代码，我已经做了一个小例子来说明我的问题。
<!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()行，但仍然无法工作。
回答 1
Stack Overflow用户
发布于 2017-08-04 17:02:19
你需要更新的东西只有2-3件：
1)每次动态添加新字段时都必须运行.autocomplete()函数。为此，只需为dom上的每个字段创建一个用于执行自动完成的函数。(只对ng重复中的第一个字段调用它一次)。职能可以是：
$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提供给.下拉内容，这是自动完成的基本组件，因此您可以通过在特定视图css中重写它来处理这个问题。
还有其他一些次要的事情，比如，在不同的文件或不同的脚本标记中有角和非角代码，module是angularjs中的关键字，避免使用它作为变量名。另外，您拼错了类名，输入元素上的类名与调用autocomplete()时使用jq选择器在控制器中选择的类名不一样。
这是代码的工作版本：https://plnkr.co/edit/EdP5cw7R5bADRMgnHfA9?p=preview
(我使用最低配置只是为了运行它，您可以在实际应用程序中集成用于自动完成和其他组件的其他详细配置项)
https://stackoverflow.com/questions/45441351
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号