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

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

我该如何得到这个？

这里是我的代码：

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

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

<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"> 
 
\t <div ng-repeat="car in myData" class="parent"> 
 
\t <div> 
 
\t \t <label>Car:</label> 
 
\t \t <span>{{car.car}}</span> 
 
\t </div> 
 
\t <br /> 
 
\t <div> 
 
\t  <label>Model:</label> 
 
\t \t <span>{{car.model}}</span> 
 
\t </div> 
 
\t <br /> 
 
\t <button ng-click="getData(obj)">Click Me!</button> 
 
\t </div> 
 
    </div> 
 
</div>

来源

2017-06-22 Sunny

你只需要在颜色数组内插入正确的值。

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

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

<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"> 
 
\t <div ng-repeat="car in myData" class="parent"> 
 
\t <div> 
 
\t \t <label>Car:</label> 
 
\t \t <span>{{car.car}}</span> 
 
\t </div> 
 
\t <br /> 
 
\t <div> 
 
\t  <label>Model:</label> 
 
\t \t <span>{{car.model}}</span> 
 
\t </div> 
 
\t <br /> 
 
\t <button ng-click="getData(car.color)">Click Me!</button> 
 
\t </div> 
 
    </div> 
 
</div>

来源

2017-06-22 07:59:49 Vivz

我需要在我的对象数组作为迭代有对象没有明确的数量来做到这一点。 – Sunny

但是在ng-repeat中，只有一个实例会作为功能参数传递，并且可能用于存储相应汽车实例的颜色 – Vivz

您正在点击每个行项目并存储与该行项目对应的颜色。什么是要求？ – Vivz

angular.module('myApp', []).controller('myCtrl', ['$scope', function($scope){ 
 
    $scope.myData = [ 
 
\t { 
 
\t 'car': 'Ford', 
 
\t 'color': [{'primary':'Black'},{'secondary':'White'}], 
 
\t 'number': '1, 2, 3', 
 
\t 'model': 'Figo' \t \t \t 
 
\t }, { 
 
\t 'car': 'Ford', 
 
\t 'color': [{'primary':'Red'},{'secondary':'Black'}], 
 
\t 'number': '4,5', 
 
\t 'model': 'Endeavour' \t \t \t 
 
\t },{ 
 
\t 'car': 'Jaguar', 
 
\t 'color': [{'primary':'White'},{'secondary':'Red'}], 
 
\t 'number': '6', 
 
\t 'model': 'F-Type' \t \t \t 
 
\t }, 
 
    ]; 
 
    
 
    $scope.getData = function(colorObj){ 
 
\t //$scope.color = angular.forEach(this.car.color, function(value, key){ 
 
\t // \t return $(this); 
 
\t //}); 
 
    
 
\t 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; \t \t \t 
 
}

<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"> 
 
\t <div ng-repeat="car in myData" class="parent"> 
 
\t <div> 
 
\t \t <label>Car:</label> 
 
\t \t <span>{{car.car}}</span> 
 
\t </div> 
 
\t <br /> 
 
\t <div> 
 
\t  <label>Model:</label> 
 
\t \t <span>{{car.model}}</span> 
 
\t </div> 
 
\t <br /> 
 
\t <button ng-click="getData(car.color)">Click Me!</button> 
 
\t </div> 
 
    </div> 
 
</div>

你会得到的颜色阵列。使用colorObj[0].primary您可以访问颜色值。

来源

2017-06-22 07:53:37 RaJeNdRa

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

回答

相关问题