動的コンテンツのボタンをクリックするとオブジェクトのプロパティを取得します

Question

私はangularjsを初めて使っています。 オブジェクトを含む配列を使用して動的コンテンツを作成しました。 私の動的コンテンツには、 'myData'配列からオブジェクトの対応するIDを取得するメソッドを呼び出すボタンがあります。

このメソッドを記述して、対応するオブジェクトのIDをmyData配列から取得するにはどうすればよいですか？

お手伝いできますか？

ここでコード

angular.module('myApp', []).controller('myCtrl', function($scope){ 
 
    $scope.myData = [{ 
 
    company: "ABC", 
 
    url: "www.abc.com", 
 
    type: "company", 
 
    id: "1" 
 
    }, { 
 
    company: "CDE", 
 
    url: "www.cde.com", 
 
    type: "company", 
 
    id: "2" 
 
    }, { 
 
    company: "DEF", 
 
    url: "www.def.com", 
 
    type: "company", 
 
    id: "3" 
 
    }]; 
 

 

 
    $scope.getID = function() { 
 
    console.log(this); 
 

 
    }; 
 

 
});

.event { 
 
    height: 150px; 
 
    width: 250px; 
 
    border: 1px solid black; 
 
    border-radius: 3px; 
 
    background-color: skyblue; 
 
    margin-top: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <div ng-repeat="obj in myData" class="event"> 
 
    Company: <span>{{obj.company}}</span> 
 
    <br /><br /> 
 
    Type: <span>{{obj.type}}</span> 
 
    <br /><br /> 
 
    URL: <span>{{obj.url}}</span> 
 
    <br /><br /> 
 
    <button ng-click="getID()">Get ID</button> 
 
    </div> 
 
</div>

Answer 1

<button ng-click="getID(obj.id)">Get ID</button> // pass id from template to controller 



    $scope.getID = function(id) { 
    $scope.forEach(function(obj){ // loop through your data 
     if(obj.id === id) { // if passed id equals to object id 
      console.log(obj) // get desired object 
     } 
    }) 

    }; 

それとも、単に関数のパラメータとしてobj.idを渡す

<button ng-click="getID(obj.id, myData)">Get ID</button> 

    $scope.getID = function(id, myData) { 
    myData.forEach(function(obj){ 
     if(obj.id === id) { 
      console.log(obj) // desired object 
     } 
    }) 

    }; 

Answer 2

のようにそれを行うことができます。

angular.module('myApp', []).controller('myCtrl', function($scope){ 
 
    $scope.myData = [{ 
 
    company: "ABC", 
 
    url: "www.abc.com", 
 
    type: "company", 
 
    id: "1" 
 
    }, { 
 
    company: "CDE", 
 
    url: "www.cde.com", 
 
    type: "company", 
 
    id: "2" 
 
    }, { 
 
    company: "DEF", 
 
    url: "www.def.com", 
 
    type: "company", 
 
    id: "3" 
 
    }]; 
 

 

 
    $scope.getID = function(id) { 
 
    console.log(id); 
 

 
    }; 
 

 
});

.event { 
 
    height: 150px; 
 
    width: 250px; 
 
    border: 1px solid black; 
 
    border-radius: 3px; 
 
    background-color: skyblue; 
 
    margin-top: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <div ng-repeat="obj in myData" class="event"> 
 
    Company: <span>{{obj.company}}</span> 
 
    <br /><br /> 
 
    Type: <span>{{obj.type}}</span> 
 
    <br /><br /> 
 
    URL: <span>{{obj.url}}</span> 
 
    <br /><br /> 
 
    <button ng-click="getID(obj.id)">Get ID</button> 
 
    </div> 
 
</div>