Question

我将从解释我们想要实现的目标开始。

我们刚刚加入了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和grade中的每个grades，我们只会显示隐藏的li和div当您点击li时，我们使用jQuery设置动画并显示隐藏的div。在子div中，我们有一个评论字段，用户可以更新并点击save。在保存时，当前对象被反射回服务器但是我们担心Angular必须经历所有2000年级，直到找到我们正在更新的那个（由于双向绑定），这意味着一切都将是真的我们买不起。

这是我们想要实现的目标：

1 我们希望以一种方式绑定数据，以便我们可以在屏幕上显示所有成绩的列表，一旦显示它们，我们就会以某种方式删除绑定。

2。当用户更新特定成绩的评论时，我们希望动态绑定该特定成绩，以便Angular确切地知道它必须更新哪一个而无需通过整个集合2000+年级。

我找到tutorial但是我仍然不确定如何将其整合到我的代码中。

我也看过this video而且我理解它背后的概念但又一次，我正在努力写一些实际有用的东西（我们刚刚开始使用Angular，所以我几乎是一个新手）

那里的任何人都能指出我正确的方向并向我提供一些代码样本，以解决我们面临的问题吗？任何建议和帮助将不胜感激

Answer 1

您总是可以使用指令

逻辑应该像这样

使用服务来保持成绩
将服务注入您的指令
制作副本，然后绑定指令中的“只读视图”
您可以根据需要观看服务以进行更改并进行更新在你的指令
在需要时延迟加载/更新 - 使用数据服务并在触发器触发时调用数据服务进行更新
如果您的触发器需要来自其他“网络服务”的推动，请考虑使用某项技术比如http://socket.io/

如果您想了解服务和指令应该如何交互，我可以将一个例子放在一起

在AngularJS中绑定+动态绑定的一种方式

这是我们想要实现的目标：

1 个答案: