Question

我想在AngularJs中创建一个可编辑的表。我用于同一页面中的另一个列表和详细信息视图的相同日期。

我的查询是当我单击列表详细信息视图（页面中的选定视图部分）部分中的编辑链接并在我单击保存按钮之前修改文本框中它未在表视图部分中更改的值，但是当我单击表格部分（页面中的可编辑表格部分）部分中的编辑并修改文本框中的值时，它也会在“选定视图”部分中更改。

但是，我想在点击保存链接后更改所有值。请修改示例代码并告知我。

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example53-production</title>
  <script src="js/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">


<h1>Editable Table</h1>
  <table id="searchObjResults">
    <tr><th ng-click="sort('name')">Name</th><th ng-click="sort('phone')">Phone</th></tr>
    <tr><td><input ng-model="search.name"></td><td><input ng-model="search.phone"></td></tr>
    <tr ng-repeat="friendObj in users | orderBy:orderProp:direction| filter:search:strict" ng-class-odd="'odd'">

      <td click-to-edit="friendObj" type="tbl"></td>
    </tr>
  </table>


  <h1>Selected View</h1>
  <ul>
    <li ng-repeat="user in users" ng-class="{active: checkActive(user)}" ng:click="select(user)">{{user.name}}</li>
  </ul>
  <p>selected: {{selectedUser.phone}}</p>
  <p click-to-edit="selectedUser.name"></p>
  <p click-to-edit="selectedUser.phone"></p>
  <script>

  var myApp = angular.module('myApp', []);
    //myApp.by.id('setbtn')element('h1').addClass('active');

    myApp.controller('MainCtrl', ['$scope','$filter', function ($scope,$filter) {

    $scope.users = [{name:'John', phone:'555-1276'},
                    {name:'John', phone:'555-1278'},
                    {name:'Mary', phone:'800-BIG-MARY'},
                    {name:'Mike', phone:'555-4321'},
                    {name:'Adam', phone:'555-5678'},
                    {name:'Julie', phone:'555-8765'},
                    {name:'Juliette', phone:'555-5678'}];

    //setting for order
    $scope.users = $filter('orderBy')($scope.users, 'name');

    //to set the defalult search
        //$scope.search = {
            //phone : "555-1278"
        //};
    //sorting
        $scope.direction = false;
        $scope.orderProp = "name";
        $scope.sort = function(column) {
            if ($scope.orderProp === column) {
                $scope.direction = !$scope.direction;
            } else {
                $scope.orderProp = column;
                $scope.direction = false;
            }
        };
        //selected when list click
         $scope.select = function(user) {
            $scope.selectedUser = user;
         };
        //applying the selected Class
        $scope.checkActive = function(user) {
            return $scope.selectedUser == user;
        };
        //set the first item as selected
        //$scope.select($scope.users[0]);
        $scope.selectedUser = $scope.users[0];


}]);
myApp.directive("clickToEdit", function() {
  var editorTemplate = '<td class="click-to-edit">' +
        '<div ng-hide="view.editorEnabled">' +
            '{{value.name}} ' +
            '{{value.phone}} ' +
            '<a href="#" ng-click="enableEditor()">Edit</a>' +
        '</div>' +
        '<div ng-show="view.editorEnabled">' +
            '<input ng-model="view.editableValue.name">' +
             '<input ng-model="view.editableValue.phone">' +
            '<a href="#" ng-click="save()">Save</a>' +
            ' or ' +
            '<a href="#" ng-click="disableEditor()">cancel</a>.' +
        '</div>' +
    '</td>';
     var editorTemplate1 = '<div class="click-to-edit">' +
        '<div ng-hide="view.editorEnabled">' +
            '{{value}} ' +
            '<a href="#" ng-click="enableEditor()">Edit</a>' +
        '</div>' +
        '<div ng-show="view.editorEnabled">' +
            '<input ng-model="view.editableValue">' +
            '<a href="#" ng-click="save()">Save</a>' +
            ' or ' +
            '<a href="#" ng-click="disableEditor()">cancel</a>.' +
        '</div>' +
    '</div>';

    return {
        restrict: "A",
        replace: true,
        //template: editorTemplate,
        template: function(element, attrs) {
          if(attrs.type=='tbl'){
            return editorTemplate;
          }
          else{
          return editorTemplate1;
          }
        },
        scope: {
            value: "=clickToEdit",
        },
         link: function(scope, element, attrs) {
          //alert(element);
        },
        controller: function($scope) {
            $scope.view = {
                editableValue: $scope.value,
                editorEnabled: false
            };

            $scope.enableEditor = function() {
                $scope.view.editorEnabled = true;
                $scope.view.editableValue = $scope.value;
            };

            $scope.disableEditor = function() {
                $scope.view.editorEnabled = false;
            };

            $scope.save = function() {
                $scope.value = $scope.view.editableValue;
                $scope.disableEditor();
            };
        }
    };
});



  </script>
  <style>
  .active{color:green}
  </style>
</body>
</html>

Answer 1

单击编辑后，您可以复制模型并进行编辑。然后单击“保存”，更新（或替换）原始模型。如果他们没有点击保存，请放弃更改。

您可以使用下划线库中的cloneDeep函数。

AngularJS可编辑表

1 个答案: