【问题标题】:One way binding + dynamic binding in AngularJSAngularJS中的一种方式绑定+动态绑定
【发布时间】:2014-03-10 19:08:59
【问题描述】:

我将首先解释我们正在努力实现的目标。

我们刚刚加入了 Angular 的潮流,并正在用它构建一个原型,看看它的能力。

目前在服务器上有大量数据(在这种情况下是成绩),我们使用 Angular 显示这些数据。

以下是我们使用的代码:

<ul class="phones">
    <li class="list-group-item" onclick="toggleExpandedView(this, true, 500)" ng-repeat="grade in grades | filter:query | orderBy:orderProp">

        <span ng-show="grade.comment"><img src="../Content/images/comment.gif"/></span>

        <a class="btn btn-primary editButton" style="float: right; position: absolute; right:10px;" ng-href="#/grades/{{grade.gradeId}}">Edit</a>

        <div class="heading1"><a ng-href="{{grade.url}}" target="_blank">{{grade.gradeValue}}</a></div>
        <div>Provided by <a href="#">{{grade.assessorFirstname}} {{grade.assessorLastname}}</a> on {{grade.dateModifiedFormatted}} </div>

        <div class="expandedGrade" onclick="childDivClick(event)" style="display: none" id="grade-{{grade.gradeId}}">
            <label>Attachments</label>{{grade.attachmentCount}}
            <br />

            <span ng-hide="editing" ng-click="editing = true"><b>{{grade.comment || 'No comments yet'}}</b></span>
            <form ng-show="editing" ng-submit="editing = false">
                <input type="text" ng-model="grade.comment" placeholder="Comment" ng-required />
                <br />
                <input id="saveChanges" type="submit" class="btn btn-primary" ng-click="saveChanges(this, grade)" text="Save changes" />
            </form>

        </div>
    </li>
</ul>

如您所见,我们有一个父 ul,对于 grades 中的每个 grade,我们只显示一个 li 和一个隐藏的 div,当您单击 li 时,我们使用jQuery 动画和显示隐藏的 div。在子 div 中,我们有一个 cmets 字段,用户可以更新并单击 save。保存时,当前对象会被返回到服务器,但是我们担心 Angular 必须经过所有 2000 个等级,直到找到我们正在更新的那个(由于两种方式绑定),这意味着一切都将是真的慢,我们负担不起。

这就是我们想要实现的目标:

1我们希望以一种方式绑定数据,以便我们可以在屏幕上显示所有成绩的列表,并且在它们全部显示后,我们希望以某种方式移除绑定。 p>

2. 当用户更新特定等级的 cmets 时,我们希望动态绑定该特定等级,以便 Angular 准确知道它必须更新哪个等级,而无需遍历整个集合2000+ 级。

我找到了tutorial,但我仍然不确定如何将其集成到我的代码中。

我也看过this video,我理解它背后的概念,但我再次努力写一些真正有效的东西(我们刚刚开始使用 Angular,所以我几乎是个新手)

有没有人能指出我正确的方向并提供一些代码示例来解决我们面临的问题?任何建议和帮助将不胜感激

【问题讨论】:

  • 你的情况很具体,所以有点复杂,但你可以看看bindonce module,然后使用 ng-class 和 ng-bind(作为类)来实现惰性绑定。我从来没有尝试过,这只是一个想法......

标签: javascript jquery html angularjs data-binding


【解决方案1】:

你总是可以使用指令

逻辑应该是这样的

  • 使用服务来保持你的成绩

  • 将服务注入到您的指令中

  • 复制一份并在你的指令中绑定“只读视图”

  • 您可以观察服务的变化并根据需要进行更新 在你的指令中

  • 在需要时延迟加载/更新 - 使用数据服务 并在触发器触发时调用数据服务进行更新

  • 如果您的触发器需要来自其他“Web 服务”的推动,请考虑采用一种技术 喜欢http://socket.io/

如果你想看看服务和指令应该如何交互,我可以举一个例子

【讨论】:

  • 非常感谢您提供详细的答案 - 如果您有时间(并且可能会被打扰),您可以举一个简单的例子来演示它吗?再次感谢您的帮助
猜你喜欢
  • 2016-02-27
  • 2014-02-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-11-29
  • 1970-01-01
  • 1970-01-01
  • 2017-01-15
相关资源
最近更新 更多