【问题标题】:AngularJS: Object in ng-repeat not displaying object updatesAngularJS:ng-repeat中的对象不显示对象更新
【发布时间】:2015-09-07 20:35:44
【问题描述】:

我有这个循环在屏幕上显示我想要的所有可能的问题。我使用指令附加到此列表,这些更新显示正常。

    {{Questions}}

        <div id="items" style="border: 3px solid; border-radius:5px; border-color: #808080; min-height: 500px; padding: 10px;">
            <div question-type ng-repeat="Question in Questions track by $index"></div>
        </div>

但是,当我点击一个问题时,我会在页面其他位置显示该问题的内容,并带有可编辑字段,以便您对其进行修改。

您可以在上面的代码中看到我在循环上方的屏幕上显示 Questions json 对象,这在我输入时正确显示了我的更新,但循环的内容没有。循环中的问题将保持其创建时的状态,不会更新。

知道为什么对象似乎正在更新,但它对使用它的 ng-repeat 没有影响吗?

编辑

这是我与 ng-repeat 一起使用的指令

app.directive('questionType', function ($http, $compile) {
    return {
        restrict: 'AE',
        link: function (scope, element, attr, model) {

            switch (scope.Question.inputType) {
                case 'checkbox':
                    //element.append('<input type="checkbox" ng-model="Question.checked"/><button ng-if="input.checked" >X</button>');
                    break;
                case 'text':
                    var strElm = '<div class="form-group" data-ng-click="selectProperties($index)"><label class="col-lg-12 control-label" style="text-align: left;">' + scope.Question.label + '</label><div class="col-lg-12"><input type="text" class="form-control" placeholder=' + scope.Question.placeholder + ' readonly></div></div>';
                    var compiledHtml = $compile(strElm)(scope);
                    element.append(compiledHtml);
                    break;
            }
        }
    };
});

第二次编辑

我没有正确绑定。得到它的工作与这条线 -

var strElm = '<div class="form-group" data-ng-click="selectProperties($index, obj.Questions)"><label class="col-lg-12 control-label" style="text-align: left;" >{{Question.label}}</label><div class="col-lg-12"><input type="text" class="form-control" placeholder=' + scope.Question.placeholder + ' readonly ng-model="Question.placeholder"></div></div>';

【问题讨论】:

  • 如何在 ng-repeat 元素中绑定 Question 项?是问题类型指令吗?避免在同一个 ng-repeat 标记上使用其他指令,这可能会导致意外行为,请使用带有参数的指令作为 ng-repeat 标记的子级
  • 嗨,我更新了答案以显示正在使用的指令及其显示方式。有什么想法可以改变这个吗?
  • 指令没有绑定,怎么更新?您需要将问题标签绑定到一些标签或文本以通过角度更新。在这种情况下,最好使用带有控制器的指令和链接的模板 insthead
  • 您好,感谢您的回复。我对此很陌生,所以请原谅我的无知。如何绑定它以使其显示?我尝试将 ng-model="Questions[$index]" 添加到附加的 html 中,但这不起作用。
  • 请参阅创建指令段落,以创建一个具有自己的范围并采用参数docs.angularjs.org/guide/directive 的指令,最终结果将如我在我的答案中发布的那样,您只会错过指令定义

标签: angularjs


【解决方案1】:

您的 ng-repeat 创建了一个孤立的范围。

将问题放在一个空对象中并使用它。

示例:

$scope.obj = {};

$scope.obj.Questions = your questions json.

在您的 HTML 中,您必须在 ng-repeat 中将其引用为 obj.Questions

【讨论】:

  • 嗨,我试过了,但结果相同。我知道孤立的范围问题以及如何将某些内容放入对象中解决了这个问题,但 Questions 已经是一个对象,所以我认为这不是问题。
【解决方案2】:

尝试像这样更改您的代码:

<div ng-repeat="Question in Questions track by $index">
    <question-type question="Question"></question-type>
</div>

也改变你的指令定义

【讨论】:

  • 嗨,我试过了,结果是一样的。如果有帮助,我用我正在使用的指令更新了我的问题。也许我在那里做错了什么。
猜你喜欢
  • 2015-05-29
  • 2016-03-21
  • 1970-01-01
  • 2020-04-15
  • 2023-03-09
  • 1970-01-01
  • 1970-01-01
  • 2015-08-06
  • 2019-02-03
相关资源
最近更新 更多