从对象数组中存在的每个对象获取每个值

Question

我需要在单击按钮时从每个对象中获取每个值。例如，单击第一个 'div.parent' 内的按钮 'Click Me' 时，应该给我 '$scope.color = ['Black', 'White'].

我如何得到这个？

这是我的代码：

angular.module('myApp', []).controller('myCtrl', ['$scope', function($scope){
  $scope.myData = [
 { 
   'car': 'Ford',
   'color': [{'primary':'Black'},{'secondary':'White'}],
   'number': '1, 2, 3',
   'model': 'Figo'     
 }, { 
   'car': 'Ford',
   'color': [{'primary':'Red'},{'secondary':'Black'}],
   'number': '4,5',
   'model': 'Endeavour'     
 },{ 
   'car': 'Jaguar',
   'color': [{'primary':'White'},{'secondary':'Red'}],
   'number': '6',
   'model': 'F-Type'     
 },
  ];
  
  $scope.getData = function(){
 $scope.color = angular.forEach(this.car.color, function(value, key){
  return $(this);
 });
 console.log($scope.color);
  };
}]);

.parent {
  border: 1px solid lightgrey;
  border-radius: 5px;
  background-color: skyblue;
  height: 100px;
  margin-top: 5px;
  padding: 10px;   
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <button id="createData">Create Data</button>
  <div class="container">
 <div ng-repeat="car in myData" class="parent">
   <div>
  <label>Car:</label>
  <span>{{car.car}}</span>
   </div>
   <br />
   <div>
     <label>Model:</label>
  <span>{{car.model}}</span>
   </div>
   <br />
   <button ng-click="getData(obj)">Click Me!</button>
 </div>
  </div>
</div>

Answer 1

angular.module('myApp', []).controller('myCtrl', ['$scope', function($scope){
  $scope.myData = [
 { 
   'car': 'Ford',
   'color': [{'primary':'Black'},{'secondary':'White'}],
   'number': '1, 2, 3',
   'model': 'Figo'     
 }, { 
   'car': 'Ford',
   'color': [{'primary':'Red'},{'secondary':'Black'}],
   'number': '4,5',
   'model': 'Endeavour'     
 },{ 
   'car': 'Jaguar',
   'color': [{'primary':'White'},{'secondary':'Red'}],
   'number': '6',
   'model': 'F-Type'     
 },
  ];
  
  $scope.getData = function(colorObj){
 //$scope.color = angular.forEach(this.car.color, function(value, key){
 // return $(this);
 //});
  
 console.log("color Array : ",colorObj);
    console.log("selected colors: ",colorObj[0].primary, ' ',colorObj[1].secondary);
  };
}]);

.parent {
  border: 1px solid lightgrey;
  border-radius: 5px;
  background-color: skyblue;
  height: 100px;
  margin-top: 5px;
  padding: 10px;   
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <button id="createData">Create Data</button>
  <div class="container">
 <div ng-repeat="car in myData" class="parent">
   <div>
  <label>Car:</label>
  <span>{{car.car}}</span>
   </div>
   <br />
   <div>
     <label>Model:</label>
  <span>{{car.model}}</span>
   </div>
   <br />
   <button ng-click="getData(car.color)">Click Me!</button>
 </div>
  </div>
</div>

您将获得颜色数组。使用 colorObj[0].primary 您可以访问颜色值。

Answer 2

您只需将正确的值放入颜色数组即可。

angular.module('myApp', []).controller('myCtrl', ['$scope', function($scope){
  $scope.myData = [
 { 
   'car': 'Ford',
   'color': [{'primary':'Black'},{'secondary':'White'}],
   'number': '1, 2, 3',
   'model': 'Figo'     
 }, { 
   'car': 'Ford',
   'color': [{'primary':'Red'},{'secondary':'Black'}],
   'number': '4,5',
   'model': 'Endeavour'     
 },{ 
   'car': 'Jaguar',
   'color': [{'primary':'White'},{'secondary':'Red'}],
   'number': '6',
   'model': 'F-Type'     
 },
  ];
  
  $scope.getData = function(obj){
   $scope.color =[]; 
        $scope.color.push(obj[0].primary);
        $scope.color.push(obj[1].secondary);
 console.log($scope.color);
  };
}]);

.parent {
  border: 1px solid lightgrey;
  border-radius: 5px;
  background-color: skyblue;
  height: 100px;
  margin-top: 5px;
  padding: 10px;   
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <button id="createData">Create Data</button>
  <div class="container">
 <div ng-repeat="car in myData" class="parent">
   <div>
  <label>Car:</label>
  <span>{{car.car}}</span>
   </div>
   <br />
   <div>
     <label>Model:</label>
  <span>{{car.model}}</span>
   </div>
   <br />
   <button ng-click="getData(car.color)">Click Me!</button>
 </div>
  </div>
</div>

从对象数组中存在的每个对象获取每个值

Get each of the values from each of the objects present inside the array of objects

arrays

foreach

object

key-value

angularjs