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

时间:2016-03-30 17:07:34

标签: html angularjs controller

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

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

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

HTML CODE:

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

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个不同风格和类的textareas,它需要动态更新

I need to update the style parameters

3 个答案:

答案 0 :(得分:0)

您的问题在于文字区域。你需要像这样拥有2路绑定而不是单向:

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

答案 1 :(得分:0)

要做其他字段,请执行以下操作。如您所见,您将textareas绑定到ng重复对象上的特定键。

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

答案 2 :(得分:0)

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

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

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