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

Question

我需要在点击按钮时抓取每个对象的每个值。 例如，点击按钮＆＃39;点击我＆＃39;在第一个'div.parent＆＃39;里面，应该给我＆＃39; $ scope.color = [＆＃39; Black＆＃39; $＆＃39; White＆＃39;]。

我如何得到这个？

这是我的代码：

＆＃13;

＆＃13;

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);
  };
}]);

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您只需在colors数组中输入正确的值即可。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

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(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，您可以访问颜色值。