angularJS从ng-repeat内的textarea获取值

Question

How can I get the value of textarea inside a ng-repeat ?

<div class="container" ng-repeat="data in dataList.dataCatalog | filter:{sea:season}">
        <img src="../content/catalog/{{season}}/{{ data.id }}" />
        <div class="containerDescription"> Desc : 
        <p>
        <textarea ng-model="textArea[$index]" style="height:120px; width:200px;">{{data.description}}
        </textarea>
        </p>
        <div ng-click="saveDescription(data.id,$index)">save</div>
        </div>
 </div>

..

  $scope.saveDescription = function (id,count) {
            description=$scope.textArea[count]
            alert(description)
        }

What is my mistake?

Answer 1

You can use data.description directly as a model, and then pass data as a parameter for your saveDescription() callback.

Additionally when interpolating values in an image src attribute you can use the ng-src directive to handle un-interpolated values.

Furthermore, using $index in a filtered ng-repeat does not guarantee that it returns the correct $index of the original data, in this case: dataList.dataCatalog .

SEE THIS DEMO

HTML

<div class="container" ng-repeat="data in dataList.dataCatalog | filter:{sea:season}">
        <img ng-src="../content/catalog/{{season}}/{{ data.id }}" />
        <div class="containerDescription"> Desc : 
        <p>
        <textarea ng-model="data.description" style="height:120px; width:200px;"></textarea>
        </p>
        <div ng-click="saveDescription(data)">save</div>
        </div>
 </div>

JAVASCRIPT

 $scope.saveDescription = function (data) {
     alert(data.id);
     alert(data.description);
 };

Answer 2

<div class="container" ng-repeat="data in dataList.dataCatalog | filter:{sea:season}">
        <img src="../content/catalog/{{season}}/{{ data.id }}" />
        <div class="containerDescription"> Desc : 
        <p>
        <textarea ng-model="textArea" style="height:120px; width:200px;">{{data.description}}
        </textarea>
        </p>
        <div ng-click="saveDescription(data.id,$index,textArea)">save</div>
        </div>
 </div>

No need to use an array. Just pass the text as a parameter to the function

 $scope.saveDescription = function (id,count,textArea) {
        description=textArea;
        alert(description)
    }