Question

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

在将以下代码用于＆＃34; repeater＆＃34;之前，编辑和保存数据功能正常。选择。

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

如果你发现＆＃34; ng-repeat＆＃34;中的所有textarea元素的行为都不相同案件。如何在编辑/保存按钮单击时定位所选的文本区域。

ANGULARJS CODE

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;
  };

}]);

提前感谢您的帮助。

Answer 1

这些方面的东西应该有效。控制器中的数据应反映您要在视图中显示的内容。

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;
      };

    }]);

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

1 个答案: