How To Push Data From One Div To Another Div(table) Using Angular Js?

I am trying to add the json data to a table on clicking the + icon. There are 2 section namely Pick Stocks from where the stocks and price (which inturn are coming from data.json)

Solution 1:

If you follow similarly of having object & showing key values in table then you can write following on ng-click of plus sign

$scope.addToTable = function(key, value){
  var mystock={key: value};
    if (!(key in $scope.stocksObj)){
    $scope.stocksObj[key] = value;
    }
}

<tr ng-repeat="(key, value) in stocksObj"><td>{{key}}</td><td>{{value}}</td></tr>

This's working plunk https://plnkr.co/edit/b3QECT1pvqnWwyQoEBTb?p=preview

But again this will not be useful if you need to have more fields in that stock. So better create object with properties as key, value, shares, weight, etc and push accordingly in array. The updated function will be

$scope.addToTable = function(key, value, index){
  var mystock={};
  mystock.key = key;
  mystock.value = value;
    console.log(index);
    if(indexes.indexOf(index) == -1){
        indexes.push(index);
        $scope.stocksArray.push(mystock);
    }
}

Here's working plunk for that https://plnkr.co/edit/r2WLGakBU9kGmWLWBN7K?p=preview

Solution 2:

ng-model directive is used for a 2-way binding, so instead of <td ng-model="portfolio.stockfromdata"></td>

try using <td ng-bind="portfolio.stockfromdata"></td> or <td>{{portfolio.stockfromdata}}</td>

and if want to make it editable, then you can use your ng-model with input like <td ><input ng-model="portfolio.stockfromdata"/></td>

here ng-model will binfd your data to the input model, and change in UI will also reflect to JSON binded data in your controller, thats the purpose of ng-model