0

我知道在 Angular 世界中，绑定数据比操作 dom 元素更好。但我想不出一种方法来实现“在时间轴中，单击一条推文，加载回复，单击另一条推文加载另一个回复”效果。

这是我想到的一些代码：

<div class="tweet" ng-repeat="tweet in tweets">
    <div class="tweet-content">{{tweet}}</div>
    <a class="button" ng-click="loadreplay()">load reply</a>
    <div class="reply-container">{{reply}}</div>
</div>

如果我这样写控制器

app.controller('Test', function($scope){
    $scope.tweets = ["foo", "bar"];
    $scope.loadreplay = function(){
        $scope.reply = "reply";
    }
});

那么所有{{reply}}字段都将填充“回复”，所以在这种情况下，操作 dom 元素是唯一的解决方案吗？还是一些更“有角度”的方式？

4

1 回答 1

1

为您的数据/模型使用适当的架构。考虑到您不仅要存储文本，而且至少要存储 ID 之类的东西，无论如何您都会使用对象。所以想想这样的事情：

$scope.tweets = [
  { id:1, txt: 'foo' },
  { id:2, txt: 'bar' }
]

然后您也可以将各个回复存储在该对象中：

$scope.loadreply = function(tweet) {
  tweet.reply = 'Reply';
}

注意：在此函数中，您还可以使用 ID 例如从服务器获取推文，如下所示：

$scope.loadreply = function(tweet) {
  tweet.reply = LoadReplies(tweet.id);
}

然后，您将使用推文特定的回复属性进行显示：

<div ng:repeat="tweet in tweets">
  <div>{{tweet.txt}}</div>
  <a ng:click="loadreply(tweet)">load reply</a>
  <div>{{tweet.reply}}</div>
</div>

请参阅此小提琴以获取工作演示：http: //jsfiddle.net/XnBrp/

于 2013-10-12T01:27:27.393 回答