2017-07-06 48 views
0

我正在尝试在点击+图标时将json数据添加到表中。有2个部分,即挑选股票从哪里股票和价格(其中inturn来自data.json)必须被添加到管理组合部分表中。如何使用角度js将数据从一个div推送到另一个div(表格)?

第一部 first section

第二部 second section 所以我想股票名称即平均日采食量,ALAN等及其相应的价格被添加到第二部分表的各股票及价格列当单击一个相应的+图标时。 我已经尝试添加,但我不完全确定如何前进。 谢谢。 Here is the plunker

   <table> 
       <tr> 
        <th>STOCK</th> 
        <th>PRICE</th> 
        <th>SHARES</th> 
        <th>WEIGHT</th> 
       </tr> 
       <tr ng-repeat="portfolio in portfolios"> 
        <td ng-model="portfolio.stockfromdata"></td> 
        <td ng-model="portfolio.pricefromdata"></td> 
        <td>num</td> 
        <td ng-model="portfolio.weightfromprice"></td> 
       </tr> 
      </table> 

脚本

$scope.portfolios = []; 

    $scope.addStock = function() { 
     $scope.portfolios.push([{ 
      "key": $scope.portfolio.stockfromdata, 
      "value": $scope.portfolio.pricefromdata 
      // "weightfromprice": $scope.weightfromprice 
     }]); 
    }; 
+0

这里的工作普拉克你plunker并不完全清楚。你从哪里得到数据'$ scope.portfolio'。和'$ scope.portfolios.push([0124]}“); $ scope.portfolio.stockfromdata, '这是不正确的,因为你在ui中使用密钥名称的数据,它应该像'$ scope.portfolios.push(['fromfromdata':$ scope.portfolio.stockfromdata,' 'pricefromdata':$ scope.portfolio .pricefromdata //“weightfromprice”:$ scope。重量从价格 }]);' – SaiUnique

+0

你能告诉我为什么plnker不清楚,我已经尝试过你说了什么,但它给出了这个错误“无法读取属性'stockfromdata'undefined” – HebleV

+0

初始化对象为'{}这样你就不会像上面那样得到错误。 – SaiUnique

回答

1

目的

$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> 

这的工作普拉克https://plnkr.co/edit/b3QECT1pvqnWwyQoEBTb?p=preview

但是,如果您需要在该股票中有更多字段,这也不会有用。所以最好用属性作为键,值,份额,重量等来创建对象,并相应地在数组中进行推送。更新功能将

$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); 
    } 
} 

https://plnkr.co/edit/r2WLGakBU9kGmWLWBN7K?p=preview

+0

谢谢天才!它效果很好。 – HebleV

+0

欢迎!而且我不是天才..只是一个学习者:) – Shantanu

0

ng-model指令被用于2路结合,所以 代替<td ng-model="portfolio.stockfromdata"></td>

尝试使用<td ng-bind="portfolio.stockfromdata"></td><td>{{portfolio.stockfromdata}}</td>

如果想使其可编辑,那么你就可以输入使用ng-model<td ><input ng-model="portfolio.stockfromdata"/></td>

这里NG-模式将您的数据binfd到输入模式,并在UI的变化也将反映到JSON在绑定数据的控制器,如果按照其对象&显示表键值,那么你可以写上以下的NG-点击加号的那同样的ng-model

+0

但是,我如何将数据添加到表中的其他部分?我应该给第一和第二部分之间的一些连接 – HebleV

+0

只是推到阵列,角度绑定将照顾在DOM中的表格渲染,尝试用我的代码:) –

+0

我得到一个类型错误“stockfromdata “未定义。 – HebleV

相关问题