以ng-repeat模式编辑和保存数据- AngularJS

Editing and Saving Data in ng-repeat mode - AngularJS

本文关键字：数据 AngularJS 保存 ng-repeat 模式 编辑      更新时间：2023-09-26

我正在使用AngularJS编辑/保存数据。下面是我试图实现的非常基本的代码示例。

JS BIN URL

编辑和保存数据功能工作正常之前，我使用下面的代码"中继器"选择器。

 ng-repeat="var in [1,2,3]"

如果你看到，在"ng-repeat"的情况下，它对所有textarea元素的行为都不一样。我怎样才能在编辑/保存按钮点击的时候定位选定的文本区域。

<<p> ANGULARJS代码/strong> 
var app = angular.module('myapp', []);
app.controller('myctrl', ['$scope', function ($scope) {
  $scope.editEnabled= false;
  $scope.dummydata= "This is dummy data";
  $scope.editData=function(){
    $scope.editEnabled = true;
    $scope.inputText = $scope.dummydata;
  };
  $scope.saveData=function(){
    $scope.editEnabled = false;
    $scope.dummydata = $scope.inputText;
  };
  $scope.disableEdit= function(){
    $scope.editEnabled = false;
  };
}]);

提前感谢您的帮助。

按照这些行应该可以工作。控制器中的数据应该反映你想在视图中显示的内容。

http://jsbin.com/beyunuze/7/edit 

<body ng-controller="myctrl">
  <div class="repeater" ng-repeat="item in items ">
    <div class="btnCont">
       <span ng-hide="item.editEnabled">
           <button ng-click="editData(item)">Edit</button>
       </span>
       <span ng-show="item.editEnabled">
           <button ng-click="saveData(item)">Save</button>
      </span>
    </div>
    <div class="textArea">
      <div ng-hide="item.editEnabled" class="content">
        {{item.dummyData}}
      </div>
      <div ng-show="item.editEnabled">
        <textarea ng-model="item.dummyData" class="content contentInput" /></textarea>
      </div>
    </div>
  </div>
</body>

js:

var app = angular.module('myapp', []);
    app.controller('myctrl', ['$scope', function ($scope) {
      $scope.items=[{dummyData:"foo"},{dummyData:"bar"},{dummyData:"baz"}];
      $scope.editEnabled= false;
      $scope.dummydata= "This is dummy data";
      $scope.editData=function(item){
        item.editEnabled = true;
      };
      $scope.saveData=function(item){
        item.editEnabled = false;
      };
      $scope.disableEdit= function(){
        $scope.editEnabled = false;
      };
    }]);
相关文章：