2017-06-22 156 views
1

我需要從單擊按鈕時獲取每​​個對象的每個值。 例如,點擊第一個'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>

回答

2

你只需要在顏色數組內插入正確的值。

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>

+0

我需要在我的對象數組作爲迭代有對象沒有明確的數量來做到這一點。 – Sunny

+0

但是在ng-repeat中,只有一個實例會作爲功能參數傳遞,並且可能用於存儲相應汽車實例的顏色 – Vivz

+0

您正在點擊每個行項目並存儲與該行項目對應的顏色。什麼是要求? – Vivz

0

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您可以訪問顏色值。

相關問題