Question

以下是我的JSON数据。

JSON

{
"1":{"id":"1","name":"Websites IT & Software","sub_cat":[
    {"id":"1","name":"Build a Website","description":"Build a Website"},
    {"id":"2","name":"Build an Online Store","description":"Build an Online Store"},
    {"id":"3","name":"Get Traffic to my Website ","description":"Get Traffic to my Website "},
    {"id":"4","name":"Write some Software","description":"Write some Software"},
    {"id":"5","name":"Convert a Template to a Website","description":"Convert a Template to a Website"},
    {"id":"53","name":"Create a Wordpress Template","description":"Create a Wordpress Template"},
    {"id":"54","name":"Create a Joomla Template","description":"Create a Joomla Template"},
    {"id":"55","name":"Create a Drupal Template","description":"Create a Drupal Template"},
    {"id":"56","name":"Develop a Mac Application","description":"Develop a Mac Application"}
    ]},
"2":{"id":"2","name":"Mobile","sub_cat":[
    {"id":"6","name":"Write an iPhone application","description":"Write an iPhone application"},
    {"id":"7","name":"Write an iPad application","description":"Write an iPad application"},
    {"id":"8","name":"Write a Blackberry application","description":"Write a Blackberry application"},
    {"id":"9","name":"Write an Android application","description":"Write an Android application"},
    {"id":"57","name":"Create a Mobile Website","description":"Create a Mobile Website"}]}}

我想要的只是根据用户选择的类别获取子类别，我想以角度方式实现相同的东西。我是否需要再次制作Ajax才能根据类别获取子类别。

关于如何实现这一点的任何想法，帮助将不胜感激。谢谢:)）

Answer 1

首先，您需要从对象中删除"1"和"2"个键，并按如下方式创建一个对象数组：

$scope.categories = [{
      "id": "1",
      "name": "Websites IT & Software",
      "sub_cat": [{
        "id": "1",
        "name": "Build a Website",
        "description": "Build a Website"
      }, {
        "id": "2",
        "name": "Build an Online Store",
        "description": "Build an Online Store"
      }]
    },
    {
      "id": "2",
      "name": "Mobile",
      "sub_cat": [{
        "id": "6",
        "name": "Write an iPhone application",
        "description": "Write an iPhone application"
      }, {
        "id": "7",
        "name": "Write an iPad application",
        "description": "Write an iPad application"
      }]
    }];

然后，您需要使用ng-options和ng-repeat指令来显示您需要的所有内容。例如：

<select ng-options="item as item.name for item in categories" ng-model="selectedCategory">
</select>

    <table class="table">
      <thead><tr>
          <th>ID</th>
          <th>Name</th>
          <th>Description</th>
      </tr></thead>
      <tbody>
        <tr ng-repeat="subCategory in selectedCategory.sub_cat">
          <td>{{subCategory.id}}</td>
          <td>{{subCategory.name}}</td>
          <td>{{subCategory.description}}</td>
        </tr>
      </tbody>
    </table>

<小时/> Plunkr可用：http://plnkr.co/edit/me0vis?p=preview

Answer 2

您可以尝试使用名称为underscore.js的第三方库。它添加了许多有用的功能，如＆＃34;其中＆＃34;：

_.where(list, properties)查看列表中的每个值，返回包含属性中列出的所有键值对的所有值的数组。

_.where(listOfPlays, {author: "Shakespeare", year: 1611}); => [{title: "Cymbeline", author: "Shakespeare", year: 1611}, {title: "The Tempest", author: "Shakespeare", year: 1611}]

以下是图书馆网页http://underscorejs.org/#where

的链接

您也可以使用lodash：https://lodash.com/

如何根据类别angularjs获取子类别

2 个答案: