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

Question

情况:

我正在制作一个角度应用,我必须使用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>

控制器:

$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;

    });

};

ATTEMPT 1:

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

无法读取未定义的属性"长度".

ATTEMPT 2:

为了解决这个问题,我在控制器中添加了这个代码:

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

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

如果我选择一个新标签然后它工作正常,但我松开了预先存在的标签.

问题(S):

如何让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

虽然如果您有一些特定的过滤要求,我建议您编写自己的过滤器以确保最佳性能.