Angularjsは、使用して新しい配列への1つの配列から配列

Question

追加項目で項目の名前を変更しますユーザー入力を使用する新しいlistItems配列

Answer 1

その可能性を確認してください。しかしあなたのコードが書かれている方法ではありません。あなたはidにではなく関数にオブジェクトを渡す必要があります。

<tr ng-repeat="x in data"> 
    <td>{{ x.id }}</td> 
    <td><input type="text" ng-model="newVal"/></td> <!--this property can be changed by user--> 
    <td><button type="button" ng-click="addToList(x, newVal)">Add to</button></td> 
</tr> 

とコントローラ機能で：

$scope.addToList = function(item, newVal) { 
    var newItem = item; 
    newItem.id = newVal; 
    $scope.listItems.push(item); 
    console.log($scope.listItems); 
    }; 

Answer 2

あなたは間違いなくそれを行うことができますが、そのためにはx.idではなくオブジェクト自体を渡す必要があります。

ここでは、動作するサンプルソリューションを示します。

var app = angular.module("sampleApp", []); 
 

 
app.controller("sampleController", ["$scope", 
 
    function($scope) { 
 
    $scope.data = [{ 
 
     id: "City-1" 
 
    }, { 
 
     id: "City-2" 
 
    }, { 
 
     id: "City-3" 
 
    }, { 
 
     id: "City-4" 
 
    }, { 
 
     id: "City-5" 
 
    }]; 
 

 
    $scope.listItems = []; 
 
    $scope.addToList = function(item) { 
 
     $scope.listItems.push(item); 
 
    }; 
 
    } 
 
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="sampleApp"> 
 
    <div ng-controller="sampleController"> 
 
    <table> 
 
     <tr ng-repeat="x in data"> 
 
     <td> 
 
      {{ x.id }}</td> 
 
     <td> 
 
      <button type="button" ng-click="addToList(x)">Add to</button> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    New List: 
 
    <table> 
 
     <tr ng-repeat="item in listItems track by $index"> 
 
     <td> 
 
      {{ item.id }}</td> 
 
     <td> 
 
      <button type="button" ng-click="addToList(x)">Add to</button> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>