Question

我正在使用MaterialiseCSS 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（）但仍无效。

Answer 1

您需要更新的内容只有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只是足够短的时间来确保您的新对象被推送＆amp;元素由ng-repeat在dom上创建。如果您实时调用getUsers()中的服务，则应在其回调函数中执行$scope.runAutocomplete()。

2）在你的css中的materialize库版本中存在一些问题＆amp;因此它以某种方式给出了风格display无和＆amp; opacity 0到.dropdown-content是自动填充的重要组成部分，因此您可以通过在特定视图中覆盖它来处理该问题。

还有其他一些小事，比如角度和角度。不同文件或不同脚本标签中的非角度代码，module是angularjs中的关键字，避免将其用作变量名称。此外，您输入错误的类名称，输入元素上的名称与您在调用autocomplete()期间使用控制器内部的jq选择器选择的名称不同。

这是您的代码的工作版本：https://plnkr.co/edit/EdP5cw7R5bADRMgnHfA9?p=preview

（我已经使用了最低配置只是为了运行它，您可以在实际应用中集成自动完成和其他组件的其他详细配置项目）

MaterializeCSS动态添加自动填充字段

1 个答案: