【问题标题】:Angular expression get property of object from equal property in array of objects角度表达式从对象数组中的相等属性中获取对象的属性
【发布时间】:2015-01-22 22:46:24
【问题描述】:

抱歉标题不好,实在想不出合适的。

无论如何,我有一个对象数组,它们都列在 ng-repeat 中。然后,我想在另一个对象数组中找到该对象,该对象与上述对象具有相同的 id 并获取其另一个属性。

我希望这个示例代码能简化一些事情:

$scope.discussions = [
    {
        recipient: {
            id: 'theid'
        },
        messages: []
    }
];

$scope.friends = [
    {
        id: 'theid',
        online: false
    }

];

在我看来,我有:

<div ng-repeat="discussion in discussions">
    <div>Online = {{//code here}}</div>
</div>

都试过了

ng-class="{online: {{friends.some(fr => fr.id == discussion.recipient._id).online}}; }"

ng-class="{online: friends.some(fr => fr.id == discussion.recipient._id).online }"

【问题讨论】:

  • 那么您可以使用 Javascript .some() 来帮助您确定 friends 的第一个元素,其中 id 匹配。
  • 我无法真正让它工作,我不太确定我可以使用角度表达式来使用什么;/
  • 我建议调用您在角度控制器中定义的一些函数,以在您的朋友数组中找到匹配的元素。
  • 问题是我要解析的这个布尔值会发生很大变化,我想立即更新视图的所有更改

标签: javascript arrays angularjs angularjs-scope expression


【解决方案1】:

我的建议是在您的角度控制器中定义一个函数,该函数可以将单个 discussion 匹配到您的 $scope.friends 中的匹配元素。该函数可能看起来像这样(这可以改进,但它可以完成工作):

$scope.findMatchingId = function (discussion) {
    var matchingFriend;
    $scope.friends.some(function (friend) {
        if (friend.id === discussion.recipient.id) {
            matchingFriend = friend;
            return true;
        }
        return false;
    });
    return matchingFriend;
};

然后在您的 html 中,您可以像这样在 ng-repeat 中的元素上调用该函数:

<div ng-repeat="discussion in discussions">
     <div>Online = {{findMatchingId(discussion)}}</div>
</div>

看到这个plnkr

【讨论】:

  • 它可以工作,但它不会像 angular 那样动态更新,所以如果值发生变化,视图保持未更新;/
  • @user3127242 我更新了 plnkr 以允许您更改朋友的 ID。我不确定您遇到了什么样的更新问题,但 plnkr 似乎可以很好地更新视图。
  • 我有 discussion.recipient._id,我想找到相应的朋友并获取其在线状态。然后,在状态更新后,我希望它在视图中立即更改,直到页面刷新完成;/
  • @user3127242 如果您尝试基于online 属性显示/隐藏,您应该使用ng-show。喜欢这个&lt;div ng-show="findMatchingId(discussion).online"&gt;Online = {{findMatchingId(discussion)}}&lt;/div&gt;
  • 我对此没有任何问题,但是该属性在初始化时正在在线更新,然后视图中没有出现任何更改;/
猜你喜欢
  • 1970-01-01
  • 2018-08-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-11-28
  • 1970-01-01
  • 2022-10-19
相关资源
最近更新 更多