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>

但它没有做任何事情。也没有遵循＆＃34;基本示例＆＃34;

<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()是每次输入内容时都会调用的函数。基本上，您需要的是一个函数，如果没有写入任何内容，则返回所有用户，或者只返回名称包含自动完成输入中所写内容的用户。

你不应该完全按照例子做的做。因为您使用的是真正的$http请求，而他们却没有。他们只是借助超时和地图等不同功能来模拟它。你的功能应该是这样的：

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

就是这样。

至于使用this代替$scope，这是John Papa在他的角度风格指南中推荐的内容。他说$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

修改

2 个答案: