在 ng-repeat 列表中没有得到更新

Question

这是我的小提琴链接http://jsfiddle.net/krthk2005/j5ze42bf/10/

问题更新：我无法更新课程和风格请告诉我

我正在尝试使用 ng-repeat 填充列表，当我更新列表中的值时，它需要更新。

HTML 代码：

<div ng-controller="Ctrl1">
    <button ng-click="updatedList(stickyList)">Updated List</button>
  <div id="mainStickyLayout" ng-repeat="sticky in stickyList">
    <!-- Stickies can be defined using ordinary HTML. Just put the "sticky" class on a wrapper around a textarea! -->
    <div id="sticky{{$index}}" class="sticky {{sticky.color}}" style="{{sticky.style}}">
      <textarea ng-model="sticky.content"></textarea>
    </div>
  </div>
  <p>
  {{finalList}}
  </p>
</div>

JS代码

var app = angular.module('myApp', []);

function Ctrl1($scope) {
     $scope.stickyList = [{
    "content": "store",
    "style": "top: 100px; left: 140px;",
    "color": "sticky-orange"
  }, {
    "content": "your",
    "style": "top: 200px; left: 240px;",
    "color": "sticky-blue"
  }, {
    "content": "note",
    "style": "top: 300px; left: 340px;",
    "color": "sticky-yellow"
  }, {
    "content": "here",
    "style": "top: 400px; left: 440px;",
    "color": "sticky-green"
  }];
  $scope.updatedList = function(stickyList) {
        $scope.finalList = stickyList;
    }
}

我使用 angularjs 编写了更新功能

请检查我发布的图片。我需要有 4 个具有不同样式和类的文本区域，并且需要动态更新

Answer 1

您的问题在于文本区域。您需要像这样拥有两种方式的绑定而不是一种方式：

<textarea ng-model="sticky.content"></textarea>

Answer 2

发生这种情况是因为您在文本区域上的绑定是一种方式。您的更改不会反映回后端值。将其更改为双向绑定，它应该可以工作

<textarea>{{sticky.content}}</textarea> //one way binding

<textarea ng-model= "sticky.content"></textarea> //two way binding(correct)

Answer 3

要做其他领域的事情是这样的。如您所见，您将 textareas 绑定到 ng-repeated 对象上的特定键。

<textarea ng-model="sticky.content">{{sticky.content}}</textarea>
<textarea ng-model="sticky.class">{{sticky.class}}</textarea>
<textarea ng-model="sticky.style">{{sticky.style}}</textarea>