【发布时间】: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