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

Question

我想用包含用户对象的对象填充我的 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>

但它什么也没做。遵循 "basic example"

也不行

<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");
    });

Answer 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() 是一个函数，它会在您每次键入内容时被调用。基本上，您需要的是 returns 所有用户（如果未写任何内容）或仅其名称包含自动完成输入中所写内容的用户的功能。

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

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

就是这样。

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

Answer 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>

Angular 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;
}

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

User object to populate md-items in md-autocomplete

angularjs

angular-material

md-autocomplete

编辑