Обновление данных строки таблицы в Angular

Привет, я изучаю угловую, мне нужна помощь по функциональности, у меня есть динамическая таблица и форма, когда я нажимаю на любую строку динамической таблицы, которую данные должны заполнять в блоках ввода формы и когда я редактирую и сохраняю данные в поле ввода, которые должны отражать изменения в них. `Обновление данных строки таблицы в Angular

$scope.Save= function($index){ 
 
    \t \t 
 
    \t \t var user1= angular.copy($scope.displayData[$index]); 
 
    \t \t fc.saveData.push(user1); 
 
    \t \t console.log(fc.saveData.name); 
 
    }}


 
<head> 
 
    <script src="https://code.angularjs.org/1.4.9/angular.js"></script> 
 
</head> 
 
<table class="table2"> 
 
    <tr> 
 
     <th>Player</th> 
 
     <th>Age</th> 
 
     <th>Ranking</th> 
 

 
    </tr> 
 
    <tr ng-repeat=" usr in saveData" ng-click="fnClick(usr)"> 
 
     <td>{{$index}}</td> 
 
     <td>{{::usr.player}}</td> 
 
     <td>{{::usr.age}}</td> 
 
     <td ng-bind="::usr.ranking"></td> 
 
    </tr> 
 
</table>` and my input boxes code is here ` 
 
<div> 
 
    <button class="btn" ng-click="Savedata()">Saveintable</button> 
 
    <label for="field1"> 
 
    \t <span>Name</span><input type="text" name="" required="true" ng-model="displayData.name"/> 
 
    \t </label> 
 
    <label for="field2"> 
 
    \t <span>Age</span><input type="text" required="true" ng-model="displayData.age"/> 
 
    \t </label> 
 
    <label> 
 
    \t <span>Ranking</span><input type="text" ame="" required="true" ng-model="displayData.ranking"/> 
 
    \t </label> 
 

 
    </label> 
 
</div>

источник

2016-02-20 Ranvijay

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

app.controller("startCtrl",function($scope){ 

    $scope.saveData=[{ 
    player:"John", 
    age:"24", 
    ranking:'1' 
    }, 
    { 
    player:"John1", 
    age:"25", 
    ranking:'2' 
    }, 
    { 
    player:"John3", 
    age:"26", 
    ranking:'3' 
    }]; 


    $scope.fnClick=function(usr,index) 
{ 

     $scope.formData=angular.copy($scope.saveData[index]); //usr object will be assigned to $scope.formData... 
    $scope.formData.index=index; 
    console.log($scope.formData); 
} 

$scope.SaveDataFun= function(formData){ 
      console.log('save data'); 
      var index$=formData.index; 
      console.log(index$); 
      // now I assume that displayData is a list of objects. 

      angular.forEach($scope.saveData,function(data,index){ 
        console.log(index +' '+ index$); 
        if(index==index$) // this will match your ediated row index$ to displayData objects row index. 
        { console.log('if') 
         console.log(data); 
         $scope.saveData.splice(index,1); 
         $scope.saveData.splice(index,0,formData); 

              console.log(formData); 
         $scope.formData={}; 

            } 
        }); 
     } 

});

я отправил ответ, но не зная о вашей проблеме. Играл с ним и снова отправлял ответ. Надеюсь, что это поможет вам.

Demo

источник

2016-02-20 04:59:34 micronyks

Попробуйте это супер простой фрагмент ...

<!DOCTYPE html> 
<html ng-app="plunker"> 

<head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 

    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> 

</head> 

<body ng-controller="MainCtrl"> 

<div class="container"> 
    <div class="row"> 
     <table class="table"> 
      <tr> 
       <th>#</th> 
       <th>Name</th> 
       <th>Age</th> 
       <th>Ranking</th> 
       <th>Edit</th> 
      </tr> 
      <tr ng-repeat="usr in tableData"> 
       <td>{{$index+1}}</td> 
       <td>{{usr.name}}</td> 
       <td>{{usr.age}}</td> 
       <td>{{usr.ranking}}</td> 
       <td><button ng-click="edit($index)">Edit</button></td> 
      </tr> 
     </table> 
    </div> 
</div> 

    <hr> 

    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-3"> 
       <form> 
        <div class="form-group"> 
         <label>Name : </label> 
         <input type="text" name="" ng-model="displayData.name" class="form-control"/>   
        </div> 

        <div class="form-group"> 
         <label>Age : </label> 

         <input type="text" ng-model="displayData.age" class="form-control"/> 

        </div> 

        <div class="form-group"> 
         <label>Ranking : </label> 
         <input type="text" ng-model="displayData.ranking" class="form-control"/>   
        </div> 

        <button class="btn" ng-click="Savedata(index)">Save in table</button> 
       </form>  
      </div>    
     </div> 
    </div> 
</body> 
</html> 

<script type="text/javascript"> 
    var app = angular.module('plunker', []); 
    app.controller('MainCtrl', function($scope) 
    { 
     $scope.index = -1; 
     $scope.displayData = []; 
     $scope.tableData = 
         [ 
          {name:'paresh',age:20,ranking:2}, 
          {name:'gami',age:25,ranking:1}, 
         ] 
     $scope.Savedata = function(index) 
     { 
      if(index==-1) 
      { 
       //add 
       $scope.tableData.push($scope.displayData); 
       $scope.displayData=[]; 
       $scope.index = -1; 

      } 
      else 
      { 
       $scope.tableData[index] = $scope.displayData; 
       $scope.displayData=[]; 
       $scope.index = -1; 

      } 
     } 

     $scope.edit = function(index) 
     { 
      console.log(index); 

      $scope.index = index; 

      $scope.displayData['name'] = $scope.tableData[index]['name'], 

      $scope.displayData['age'] = $scope.tableData[index]['age'], 

      $scope.displayData['ranking'] = $scope.tableData[index]['ranking']; 
     } 
    }); 
</script>

источник

2016-02-20 03:00:11

Благодаря Paresh но вещь с вне фактически нажав на кнопку saveintable данные в таблице меняется из-за два пути связывания данных. Это та же проблема, с которой я столкнулся. поэтому данные в таблице должны меняться только после действия кнопки. и вместо кнопки редактирования я ожидаю щелкнуть по строке, а данные строки должны заполняться во входных полях – Ranvijay

ok не проблема, подождите, я обновляю свой ответ –

answer edit. если я помогу +1 для меня. –

Обновление данных строки таблицы в Angular

ответ

Смежные вопросы