使用具有ng-repeat的特定键来定向特定数据项

时间:2018-05-29 07:24:55

标签: angularjs json angularjs-ng-repeat

我有一个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"的元素应该与其余元素分开。

4 个答案:

答案 0 :(得分:1)

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

试试这是否有效!!祝你好运!

答案 1 :(得分:1)

您可以创建范围变量来存储具有属性“group”的已过滤项目,如下所示

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 :(得分:0)

假设您的JSON包含一个数组(在您的json中没有显示但我认为它在那里)。 首先,将JSON解析为JsonObject,然后将其作为数组

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">

  <table class="table" id="data_table">
    <tbody>
      <tr>
        <th></th>
        <th></th>
        <th></th>
      </tr>
      <tr class="table">
        <td></td>
        <td class="prod">First cell</td>
        <td class="prod">Second cell</td>
        <td class="prod">Third Cell</td>
        <td> <button type="button" id="btn1" class="add-row">Replace Row</button></td>
      </tr>
      <tr class="table_hidden">
        <td></td>
        <td>1a</td>
        <td>2a</td>
        <td>3a</td>
        <td></td>
      </tr>

      <tr class="table">
        <td></td>
        <td class="prod">Fourth Cell</td>
        <td class="prod">Fifth cell</td>
        <td class="prod">Sixth Cell</td>
        <td> <button type="button" id="btn2" class="add-row">Replace Row</button></td>
      </tr>
      <tr class="table_hidden">
        <td></td>
        <td>4a</td>
        <td>5a</td>
        <td>6a</td>
        <td></td>
      </tr>


      <tr class="table">
        <td></td>
        <td class="prod">Seventh</td>
        <td class="prod">Eighth</td>
        <td class="prod">Ninth</td>
        <td> <button type="button" id="btn3" class="add-row">Replace Row</button></td>
      </tr>

      <tr class="table_hidden">
        <td></td>
        <td>7a</td>
        <td>8a</td>
        <td>9a</td>
        <td></td>
      </tr>
      <tbody>
  </table>
</div>

然后你可以在你的html中执行此操作

JSONArray jsonArray = new JSONArray(jsonString);

答案 3 :(得分:0)

检查此代码。

<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>