当前位置: 首页 > 面试题库 >

选择的Angular指令未更新

空慈
2023-03-14
问题内容

我已经遵循了有关“选择和角度”的出色教程(链接)(代码几乎相同)

这是我的指令:

app.angularModule.directive('chosen', function() {
    var linker = function (scope, element, attrs) {
        var list = attrs['chosen'];

        scope.$watch(list, function () {
            element.trigger('chosen:updated');
        });

        element.chosen({ width: '350px'});
    };

    return {
        restrict: 'A',
        link: linker
    };
});

这是html:

<select data-placeholder="Choose a Category"  multiple class="col-lg-8 chosen-select" chosen="items"
                            ng-options="item._backingStore.Name for item in items"   ng-model="selectedCategories" >
                    </select>

我想要的是,当用户单击编辑按钮时,弹出模式窗口,并在模式窗口中选择在单击编辑按钮之前选择的类别。

这是控制器的一部分:

  $scope.$watch(function() { return adminCrudService.getCategoriesForUpdate(); }, function() {
                $scope.action = "edit";
                $scope.categoriesForUpdate = adminCrudService.getCategoriesForUpdate();
                if ($scope.categoriesForUpdate.length > null) {
                    $scope.selectedCategories = _.filter($scope.items, function (item) {
                        return _.contains($scope.categoriesForUpdate, item);
                    });
                }
            });

我已经记录了 $ scope.selectedCategories ,它们一切都很好,但是由于某种原因,在选择中什么都没有选择。

那么我在做什么错了,我该如何解决呢?

编辑

我注意到,当我选择一些项目,关闭模式,再次打开它时,尽管我将这一行放在$ watch中,但选择的值又出现了

$scope.selectedCategories = "";

编辑2

所以我离开了一段时间,因为我还有很多重要的事情要处理。我尝试了没有选择,即使用“正常”选择和代码的作品。因此,明确地说,我选择的指令无法正常工作。


问题答案:

我已经解决了,解决方案实际上非常容易和直接(当您了解Angular指令的工作原理时)。这是指令的完整代码:

app.angularModule.directive('chosen', function() {
    var linker = function (scope, element, attrs) {
        var list = attrs['chosen'];

        scope.$watch(list, function () {
            element.trigger('chosen:updated');
        });

        scope.$watch(attrs['ngModel'], function() {
            element.trigger('chosen:updated');
        });

        element.chosen({ width: '350px'});
    };

    return {
        restrict: 'A',
        link: linker
    };
});


 类似资料:
  • 问题内容: 我正在一个angularjs项目上工作,并且在select.not内没有绑定存在问题,但是相同的概念正在另一个select标签和同一html页面中工作。下面是代码。 功能放置在控制器中。 任何人的帮助都是非常可贵的……谢谢。 问题答案: 基于小马的托尼的小提琴: 使用控制器: http://jsfiddle.net/basarat/3y5Pw/43/

  • 我试图使新值被选中后,调用eventChange()函数并将选中的值恢复为默认值。但会发生什么:ngModel值更新,但所选值保持不变。我应该如何使selected值和ngModel值相同? HTML文件 更新:以防万一的澄清:正在调用函数,但我想通过JavaScript更改所选选项。我尝试通过更改ngModel值来实现这一点,但即使ngModel值为cahnged时,所选选项也不会更改。

  • 问题内容: 在处理内部数据(例如,插入或删除数据)时如何在Angular指令中触发变量,但不给该变量分配新对象? 我有一个当前从JSON文件加载的简单数据集。我的Angular控制器可以做到这一点,并定义一些功能: 我有一个正确地称为函数,并且新对象正确插入到集合中。每次点击“添加”按钮,我设置的表格都会更新。 但是,在所有这些情况发生时,我设置的要监视的指令不会被触发。 我在HTML中定义了标签

  • 问题内容: 这是代码: 单击命令按钮时,将调用并执行后备bean中的getDualListModelForTags()。在getDualListModelForTags()中,我做了一些修改,所以我希望更新选择列表。但是,选择列表(id = tags)不会再次呈现。仅当我刷新页面时,才会对选择列表进行修改。 问题答案: PrimeFaces 组件无法与一起使用。您需要使用按钮自己的以ajax为目标

  • 我在用房间数据库。