使用 ng-repeat 以特定键定位特定数据项答案

【问题标题】：Targeting specific data items with a particular key with ng-repeat使用 ng-repeat 以特定键定位特定数据项
【发布时间】：2018-05-29 07:24:54
【问题描述】：

我有一个 JSON 对象，如下所示：

{
   "name": "cameraasd_main_autofocus",
   "value": "Lasasd autofocus",
   "displayName": "Autofocus"
 },
{
   "name": "screen_siasdze",
   "value": "5.2\asd",
   "displayName": "Sdascreen Size",
   "group": "General"
},
{
   "name": "camera_maindas_features",
   "value": "Digital Zoom,das Auto Flash, Digital image stabilization"
   "displayName": "Features"
},

在这个数据对象中，我只想定位具有group 属性和ng-repeat 的元素。我必须进一步将元素与特定组进行分组。例如，从整个对象中，组值为 "General" 的元素应与其余元素分开。

【问题讨论】：

检查我的答案以与组过滤。
您能否提供该答案的链接

标签： angularjs json angularjs-ng-repeat

【解决方案1】：

您可以创建一个范围变量来存储过滤后的具有“组”属性的项目，如下所示

var data = [{
   "name": "cameraasd_main_autofocus",
   "value": "Lasasd autofocus",
   "displayName": "Autofocus"
 },
{
   "name": "screen_siasdze",
   "value": "5.2asd",
   "displayName": "Sdascreen Size",
   "group": "General"
},
{
   "name": "camera_maindas_features",
   "value": "Digital Zoom,das Auto Flash, Digital image stabilization",
   "displayName": "Features"
}];

$scope.filteredData = data.filter(function(x){ return x.hasOwnProperty("group")});

然后在 UI 中使用ng-repeat

<ul>
    <li ng-repeat="item in filteredData">
      {{item.name}} || {{item.value}} 
    </li>
</ul>

这是一个工作示例：https://jsfiddle.net/Lt7aP/8267/

编辑：如果你想根据特定的组名分离出元素，那么你可以试试下面的代码

$scope.filteredData = data.filter(function(x){ return x.hasOwnProperty("group") && x.group == "General"});

在这种情况下，只会显示General 组。

【讨论】：

【解决方案2】：

<div ng-repeat="x in records">
    <div ng-if="x.group"> {{x.name}} </div>
</div>

试试这是否可行！祝你好运！

【讨论】：

这行得通。您能帮我将元素与特定组分开吗
@ujjwalgupta 我已经更新了我的答案，只显示一般组。
当然@ujjwalgupta.. 你可以使用这个 $scope.groupX = yourJSONData.filter(groupWithANameX => groupWithANameX .group === "Features") 。然后在上面的 html 中你可以用 groupX 替换记录。

【解决方案3】：

假设您的 JSON 包含一个数组（未显示在您的 json 中，但我认为它在那里）。首先，将您的 JSON 解析为 JsonObject，然后将其作为数组获取

JSONArray jsonArray = new JSONArray(jsonString);

然后你可以在你的html中做到这一点

<div ng-repeat="elem in jsonArray">
   <a ng-if="elem.group">{{ elem.property }}</a>
</div>

【讨论】：

【解决方案4】：

检查此代码。

<div>
        <h3>With Group</h3>
        <div ng-repeat="d in data">
            <div ng-if="d.group">
                {{d.name}}
            </div>
        </div>
    </div>

    <div>
        <h3>Without Group</h3>
        <div ng-repeat="d in data">
            <div ng-if="!d.group">
                {{d.name}}
            </div>
        </div>
    </div>

【讨论】：