在 md-autocomplete 中填充 md-items 的用户对象答案

【问题标题】：User object to populate md-items in md-autocomplete在 md-autocomplete 中填充 md-items 的用户对象
【发布时间】：2018-02-16 03:09:37
【问题描述】：

我想用包含用户对象的对象填充我的 md-autocomplete。它通过工厂以 JSON 格式检索到$scope.users。我可以使用 Angular 查看器在控制台中检查对象。

users:
    user_id:
        display_name: "value"
        first_name: "value"
        last_name: "value"
    user_id:
        display_name: "value"
        first_name: "value"
        last_name: "value"
    etc...

我希望将模型值设置为 user_id 模型，并将显示文本设置为 display_name。这可能吗？我已经尝试过（根据documentation，应该只需要md-items 属性

<md-autocomplete md-items="u in users"></autocomplete>

但它什么也没做。也不遵循“基本示例”

<md-autocomplete md-selected-item="videoInfo.lineUp.1" md-search-text="looseheadSearchText" md-items="u in users" md-item-text="u.display_name"></md-autocomplete>

编辑

这是我用来获取users 对象的代码：

angular.module("app").controller("MainController", ["$scope", "userRepository", function ($scope, userRepository) {
    userRepository.get(function(data) {
        $scope.users = data;
    });

app.factory("userRepository",
    function($resource) {
        return $resource("/wp-content/themes/zerif-lite-child/inc/get_users.php");
    });

【问题讨论】：

查看此链接，阅读他们关于 md-autocomplete 的文档，material.angularjs.org/latest/demo/autocomplete 并在询问之前尝试一下。
我做了，但我使用了这个链接：material.angularjs.org/latest/api/directive/mdAutocomplete。我虽然只需要 md-items 属性来完成这项工作。我看到还有一个 md-item-text 属性，但这不是手头的问题。我无法加载这些项目，而且文档不够清晰，我无法理解......
@SLearner 对于如何实现所有文档示例中描述的searchQuery 函数，您有什么建议吗？我真的没有得到文档..

标签： angularjs angular-material md-autocomplete

【解决方案1】：

在提问之前，您应该始终先查看documentation。

它说你至少需要这样的东西：

<md-autocomplete
      md-selected-item="selectedUser"
      md-search-text-change="searchTextChange(searchText)"
      md-search-text="searchText"
      md-selected-item-change="selectedItemChange(item)"
      md-items="item in querySearch(searchText)"
      md-item-text="item.display_name"
      md-min-length="0"
      placeholder="What is your favorite User?">
    <md-item-template>
      <span md-highlight-text="searchText" md-highlight-flags="^i">{{item.display_name}}</span>
    </md-item-template>
    <md-not-found>
      No states matching "{{searchText}}" were found.
    </md-not-found>
  </md-autocomplete>

希望对你有帮助

更新

searchQuery() 是一个在您每次键入内容时都会调用的函数。基本上，您需要的是一个函数，如果没有写入任何内容或仅返回名称包含自动完成输入中所写内容的用户，则该函数会返回所有用户。

您不应该完全按照示例中的方式进行操作。因为您使用的是真正的$http 请求，而它们没有。他们只是在超时和地图等不同功能的帮助下模拟它。您的函数应如下所示：

$scope.searchQuery = function(searchText){
     return userRepository.get(searchText);
}

就是这样。

至于使用this 而不是$scope，这是John Papa 在他的角度风格指南中推荐的。他说$scope 应该只在更具体的条件下使用。

【讨论】：

其实我确实先看了documentation，但让我印象深刻的是只需要md-items属性（为什么前面有一个*对吗？）
也许我应该更清楚地说明它，所以我修改了我的问题。我怀疑它与文档中的 querySearch() 函数有关。但是，我不明白它是如何工作的。
@SjorsHijgenaar 您如何获取您的users 数据？您是否通过$http 请求获得它？
@Jaohngir Rahmonov 是的，我将编辑代码以合并它。
@SjorsHijgenaar 查看我的更新以了解 searchQuery() 是什么

【解决方案2】：

HTML：

<md-autocomplete
    md-selected-item="videoInfo.lineUp[1]"
    md-search-text="searchText"
    md-items="item in searchQuery(searchText)"
    md-item-text="item.display">
</md-autocomplete>

角searchQuery()函数：

$scope.searchQuery = function (searchText) {
    var query = searchText.toLowerCase();
    var users = [];
    angular.forEach($scope.users,
        function (value, key) {
            // value = user object
            // key = userId
            var dN = value["display_name"];
            if (dN) {
                var obj = {};
                obj[key] = value;
                obj["display"] = dN;
                if (dN.toLowerCase().indexOf(query) !== -1) {
                    users.push(obj);
                }
            }
        });
    return users;
}

【讨论】：