Javascript AngularJs：如何让ui选择正常工作？

情况：

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

    });

};

我正在做一个角度的应用程序，我必须使用ui选择：在用户信息页面，在选择必须有可能选择一个或多个标签。 它几乎可以工作了，除了我在获取和显示预先存在的标记时遇到问题之外

代码：

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

    });

};

查看：

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

尝试1:

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

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

无法读取未定义的属性“length”

尝试2:

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

为了解决此问题，我在控制器中添加了以下代码：

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

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

如果我选择了一个新的标签，那么它可以正常工作，但是我松开了预先存在的标签

问题：

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

如何使ui select正常工作？（目前为v0.8.3） 有冲突的问题吗

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

---

多谢各位

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

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

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

我假设您的代码中没有包含此过滤器，这可能是您遇到问题的原因。您可以使用angular的法线过滤器解决此问题：

或者，如果要筛选多个属性，则可以编写要筛选的propsFilter筛选器，而不是和。如果使用“筛选器”筛选多个属性，它将尝试在所有属性中匹配搜索值

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

app.filter（'propsFilter'，function（）{
返回功能（项目、道具）{
var out=[]；
if（角度isArray（项目））{
items.forEach（功能（项目）{
var itemMatches=false；
var keys=Object.keys（道具）；
对于（变量i=0；i

您可以在此处看到包含筛选器的提交：

---

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

我不知道Select2#4.0之前的情况如何，但如果没有

angular ui select

，使用它并不是那么困难（而且它的依赖性也少了一个）

只需在bower dependencies中包含

select2

，并在指令的

链接中使用它即可：

.directive('someDirective', function() {
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            element.find('.your-select2').select2({
                theme: 'classic',
                placeholder: 'Select a placeholder...',
                allowClear: true,
                data: [{ id: 'New', text: 'New'}]...
            });
        },
    };
})

以及您的HTML：

<select class="your-select2" ng-model="a.model.field"></select>



如果需要，您也可以通过服务从控制器加载
数据
，然后使用
范围
进行设置

我在尝试使用
angular ui select
时这样说，因为我认为“嘿，它是angular，你必须为它使用插件！”，但情况并非总是这样：）。另外，我发现这些文档没有那么大的帮助（叫我懒，但是嘿）
我对propsFilter进行了一些优化。它正在做什么

props[prop].toLowerCase();

在items迭代中，但实际上只需要计算我们拥有的属性数的倍。目前它被评估为
物品计数*道具计数

因此，最终优化的代码如下所示：

app.filter('casinoPropsFilter', function() {
    return function(items, props) {
        var out = [];

        if (angular.isArray(items)) {
            var keys = Object.keys(props);
            var propCache = {};

            for (var i = 0; i < keys.length; i++) {
                var prop = keys[i];
                var text = props[prop].toLowerCase();
                propCache[props[prop]] = text;
            }

            items.forEach(function(item) {
                var itemMatches = false;

                for (var i = 0; i < keys.length; i++) {
                    var prop = keys[i];
                    var text = propCache[props[prop]];
                    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;
    };
});    


app.filter（'casinoPropsFilter'，function（）{
返回功能（项目、道具）{
var out=[]；
if（角度isArray（项目））{
var keys=Object.keys（道具）；
var propCache={}；
对于（变量i=0；i
感谢您指出，
propsFilter
是一种自定义方法。这可能会帮我省下几个小时的挠头时间。我将提交一个公关到用户界面选择的国家一样多。嗨，谢谢你的解释。我开始使用您提供的代码，但遇到了一个bug。事实证明，在这里发布的内容与comm有区别