2015-12-11 59 views
0

大家好,我是angularJs中的新成員。我想在表格中編輯它之後更新表格中的單行而不是整個表格。如何使用angular js更新後更新單行

Here I am trying to create a table without ng-repeat. 

plnkr

+0

你有一些代碼可以顯示嗎?你的桌子是什麼樣的?你的表格呢? – bstockwell

+0

在plunker上提供代碼 –

+0

爲什麼你試圖創建一個沒有ng-repeat的表!這是完全錯誤的方式...... ng-repeat幫助你獲得你所有的數據。 – Maher

回答

0

最終溶液..

<!DOCTYPE html> 
 
<html ng-app="app" ng-controller="ctrl"> 
 

 
<head> 
 
    <title>My ParseApp site</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script> 
 
</head> 
 

 
<body> 
 
    <form ng-show="update"> 
 
     user <input type="text" ng-model="upname.name" /> <button ng-click="updateTable(upname)">save</button> 
 
    </form> 
 

 
    <table> 
 
    <tr ng-repeat="info in infos"> 
 
     <td ng-bind="info.name"></td> 
 
     <td ng-bind="info.lastname" ></td> 
 
     <td> 
 
     <button ng-click="updateMe(info)">click to edit</button> 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 
    <script> 
 
    var app = angular.module('app', []); 
 

 
    app.controller("ctrl", function($scope) { 
 
     $scope.infos = [{ 
 
     name: "user1",id:0,lastname:"abc" 
 
     }, { 
 
     name: "user2",lastname:"abc",id:1 
 
     }, { 
 
     name: "user3",lastname:"abc",id:2 
 
     }, { 
 
     name: "user4",lastname:"abc",id:3 
 
     }]; 
 

 
     $scope.updateMe = function(object) { 
 
     $scope.upname = object; 
 
     $scope.update=true; 
 
     } 
 
     
 
     $scope.updateTable = function(object){ 
 
     
 
     } 
 
    }) 
 
    </script> 
 
</body> 
 

 
</html>

0

<!DOCTYPE html> 
 
<html ng-app="app" ng-controller="ctrl"> 
 

 
<head> 
 
    <title>My ParseApp site</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <table> 
 
    <tr ng-repeat="info in infos"> 
 
     <td ng-hide="info.update" ng-bind="info.name"></td> 
 
     <td ng-show="info.update"> 
 
     <input type="text" ng-model="info.name" /> 
 
     </td> 
 
     <td> 
 
     <button ng-click="updateMe(info)">click to edit</button> 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 
    <script> 
 
    var app = angular.module('app', []); 
 

 
    app.controller("ctrl", function($scope) { 
 
     $scope.infos = [{ 
 
     name: "user1" 
 
     }, { 
 
     name: "user2" 
 
     }, { 
 
     name: "user3" 
 
     }, { 
 
     name: "user4" 
 
     }]; 
 

 
     $scope.updateMe = function(object) { 
 
     object.update ? object.update = false : object.update = true; 
 
     } 
 
    }) 
 
    </script> 
 
</body> 
 

 
</html>

+0

謝謝你..它是有幫助的.. –

+0

@ R.Raj歡迎你我的朋友;) – Maher

+0

但我需要一個不同的表格來更新數據,並會有更多的字段來更新,這將是動態的.. –