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

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>