javascript - AngularJs:如何使 ui-select 正常工作？

Question

情况:

我正在制作一个 Angular 应用程序，我必须在其中使用 ui-select:在用户信息页面中，在选择中必须可以选择一个或多个标签。它几乎可以正常工作，除了我在获取和显示预先存在的标签时遇到问题。

代码:

查看:

<ui-select multiple ng-model="info_data.tags" theme="bootstrap" ng-disabled="disabled">

  <ui-select-match placeholder="Select tag...">{{$item.name}} </ui-select-match>

  <ui-select-choices repeat="tag in all_tags | propsFilter: {name: $select.search}">

    {{tag.name}}

  </ui-select-choices>

</ui-select>

<p>Selected: {{info_data.tags}}</p>

Controller :

$http({

    url: base_url + 'main/db_get_all_tags',
    method: "POST",

 }).success(function (data) {

    $scope.all_tags = data;

});

$scope.show_info = function() {

    var result_info = DbService.get_info( $stateParams.db_data_id );

    result_info.then( function( data )
    {
        $scope.info_data = data;

    });

};

尝试 1:

它发生了一个非常奇怪的行为。我在用户的信息页面中看不到标签，甚至在 ui-select 中也看不到。除非刷新 5/6 次，否则它会突然神奇地工作，在用户信息页面和 ui-select 中显示标签。在这两种情况下，无论工作与否，我都会收到几条相同类型的错误消息:

Cannot read property 'length' of undefined.

尝试 2:

为了解决这个问题，我在 Controller 中添加了这段代码:

$scope.info_data = { tags: [] };
$scope. all_tags = [];

而且我再也没有收到任何错误消息。该应用程序稳定，我可以在用户信息页面中看到正确的标签。唯一的问题是标签不再加载到 ui-select 中。

如果我选择一个新标签那么它工作正常，但我丢失了预先存在的标签。

问题:

如何让 ui-select 正常工作？ (当前 v0.8.3)有冲突的问题？

如何从服务器正确调用预先存在的数据？

非常感谢!

Answer 1

您没有特别描述您所看到的错误，所以我不知道以下内容是否有帮助。

我最初在使用 ui-select 演示代码作为示例时遇到了问题，因为他们使用的是 propsFilter 过滤器，这是他们为演示编写的自定义过滤器:

<ui-select-choices repeat="tag in all_tags | propsFilter: {name: $select.search}">

我假设您没有在代码中包含此过滤器，这可能是您遇到问题的原因。您可以使用 Angular 的普通 过滤器 解决它:

<ui-select-choices repeat="tag in all_tags | filter: {name: $select.search}">

或者，如果您有多个属性要过滤，您可以编写 propsFilter 过滤器来过滤 OR 而不是 AND。如果您使用“过滤器”来过滤多个属性，它将尝试在所有属性中匹配搜索值。

app.filter('propsFilter', function() {
  return function(items, props) {
            var out = [];
                if (angular.isArray(items)) {
                  items.forEach(function(item) {
                        var itemMatches = false;

                        var keys = Object.keys(props);
                        for (var i = 0; i < keys.length; i++) {
                              var prop = keys[i];
                              var text = props[prop].toLowerCase();
                              if (item[prop].toString().toLowerCase().indexOf(text) !== -1) {
                                    itemMatches = true;
                                    break;
                                  }
                            }

                            if (itemMatches) {
                              out.push(item);
                            }
                      });
                } else {
                  // Let the output be the input untouched
                      out = items;
                }

                return out;
          };
    });

你可以在这里看到带有过滤器的提交: https://github.com/angular-ui/ui-select/commit/3fac88cfad0ad2369c567142eadba52bdb7998b1

尽管如果您有一些特定的过滤要求，我还是建议您编写自己的过滤器以确保最佳性能。