对象的 AngularJS ng-repeat 包含对象和数组 [英] AngularJS ng-repeat for object contains objects and arrays

查看：28 发布时间：2021/11/10 0:14:29 angularjs angularjs-ng-repeat

本文介绍了对象的 AngularJS ng-repeat 包含对象和数组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个对象，里面有对象，子对象中有数组.结构如下:

var 关键字 = {动物" : {宠物":[孔雀鱼"、鹦鹉"、金鱼"、狗"、猫"],野生动物" : [老虎"、蚂蚁"、利特拉"、孔雀"、猫鼬"],家养动物":[牛"、猪"、山羊"、马"]},食物" : {快餐" : [芝士汉堡"、汉堡包"],点心" : [巧克力"、饼干"、蛋糕"、馅饼"]},车辆" : {摩托车" : [哈雷戴维森"],车" : [兰博基尼"、法拉利"、布加迪"、宝马"、奔驰"]},电影" : {科幻小说" : [《阳光》、《星际穿越》、《月球》、《遗忘》、《星际迷航》、《星球大战》]}};

我制作了一个 foreach 循环，用于遍历内部元素并将它们打印在屏幕上:

 angular.forEach(keywords, function(value, key) {控制台日志(键)；angular.forEach(value, function(value, key) {控制台日志(键)；angular.forEach(value, function(value, key) {控制台日志(值)；})})})

现在，我正在尝试对 div 上的 ng-repeat 指令执行相同的操作(其中有一个 div，子 div 中有另一个)，但无法使其工作，不知道如何操作启动它.有什么想法吗?

解决方案

var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {$scope.keywords = {动物": {宠物":[孔雀鱼"、鹦鹉"、金鱼"、狗"、猫"],野生动物": [老虎"、蚂蚁"、利特拉"、孔雀"、猫鼬"],家养动物":[牛"、猪"、山羊"、马"]},食物": {快餐": [芝士汉堡"、汉堡包"],点心": [巧克力"、饼干"、蛋糕"、馅饼"]},车辆": {摩托车": [哈雷戴维森"],车": [兰博基尼"、法拉利"、布加迪"、宝马"、奔驰"]},电影": {科幻小说": [《阳光》、《星际穿越》、《月球》、《遗忘》、《星际迷航》、《星球大战》]}};});

.section1{背景颜色:矢车菊蓝；}.section2{背景颜色:浅蓝色；}.section3{背景颜色:天蓝色；}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><body ng-app="myApp" ng-controller="myCtrl"><div ng-repeat="(keyword, list) in Keywords" class="section1">{{关键词}}<div ng-repeat="(name, items) in list" class="section2">{{姓名}}<div ng-repeat="item in items" class="section3">{{物品}}

I have an object, which has objects inside, and arrays in child objects. Here's the structure:

var keywords = {
    "Animals" : {
      "Pets" : [
        "Guppy", "Parrot", "Goldfish", "Dog", "Cat"
      ],
      "Wild animals" : [
        "Tiger", "Ant", "Tetra", "Peafowl", "Mongoose"
      ],
      "Domestic animals" : [
        "Cow", "Pig", "Goat", "Horse"
      ]
    },
    "Food" : {
      "Fast food" : [
        "Cheeseburger", "Hamburger"
      ],
      "Dessert" : [
        "Chocolate", "Cookie", "Cake", "Pie"
      ]
    },
    "Vehicle" : {
      "Motorcycle" : [
        "Harley Davidson"
      ],
      "Car" : [
        "Lamborghini", "Ferrari", "Bugatti", "BMW", "Mercedes"
      ]
    },
    "Movie" : {
      "Science fiction" : [
        "Sunshine", "Interstellar", "The Moon", "Oblivion", "Star Trek", "Star Wars"
      ]
    }
  };

I've made a foreach loop for looping through the elements inside and print them on screen:

  angular.forEach(keywords, function(value, key) {
    console.log(key);

    angular.forEach(value, function(value, key) {
      console.log(key);

      angular.forEach(value, function(value, key) {
        console.log(value);
      })
    })
  })

Now, I'm trying to do the same with ng-repeat directive on a div (that has a div in it, and another in the child div), but can't make it work, have no clue how to start it. Any idea?

解决方案

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.keywords = {
    "Animals": {
      "Pets": [
        "Guppy", "Parrot", "Goldfish", "Dog", "Cat"
      ],
      "Wild animals": [
        "Tiger", "Ant", "Tetra", "Peafowl", "Mongoose"
      ],
      "Domestic animals": [
        "Cow", "Pig", "Goat", "Horse"
      ]
    },
    "Food": {
      "Fast food": [
        "Cheeseburger", "Hamburger"
      ],
      "Dessert": [
        "Chocolate", "Cookie", "Cake", "Pie"
      ]
    },
    "Vehicle": {
      "Motorcycle": [
        "Harley Davidson"
      ],
      "Car": [
        "Lamborghini", "Ferrari", "Bugatti", "BMW", "Mercedes"
      ]
    },
    "Movie": {
      "Science fiction": [
        "Sunshine", "Interstellar", "The Moon", "Oblivion", "Star Trek", "Star Wars"
      ]
    }
  };
});

.section1{
 background-color: CornflowerBlue; 
}
.section2{
 background-color: lightblue; 
}
.section3{
 background-color: Azure ; 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="(keyword, list) in keywords" class="section1">
    {{keyword}}
    <div ng-repeat="(name, items) in list" class="section2">
      {{name}}
      <div ng-repeat="item in items" class="section3">
          {{item}}
      </div>
    </div>
  </div>
  
  </body>

这篇关于对象的 AngularJS ng-repeat 包含对象和数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

对象的 AngularJS ng-repeat 包含对象和数组 [英] AngularJS ng-repeat for object contains objects and arrays

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

对象的 AngularJS ng-repeat 包含对象和数组 [英] AngularJS ng-repeat for object contains objects and arrays

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭