Question

大家好，我是angularJs的新手。我希望在表单中编辑后更新表中的单行而不是整个表。

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

plnkr

Answer 1

＆＃13;

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

＆＃13;

Answer 2

最终解决方案..

＆＃13;

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

＆＃13;

如何使用角度js在更新后刷新单行

2 个答案: