Question

我有一个带有5个值的数组ReqUserDetails。我需要在ng-repeat中显示textarea并为它们写推荐。但问题是，当我为一个textarea写作时，它也反映了其他人，因为它有共同的ng模型。

<div ng-repeat="item in ReqUserDetails track by $index">  
  <img class="styImage" src="{{item.image}}">
  <span>{{item.fname}} {{item.lname}} </span>
  <span>{{item.message}}</span>
  <span>{{item.cdate}}</span>
  <br>
  <textarea rows="5" cols="30" placeholder="Write Recommendation"
    ng-model="model.textRecommendation"></textarea>                   
  <br>                   

  <button type="button" class="button btn"
    ng-click="writeRecommendation()">Write Recommendation</button>
  <button type="button" class="button btn"
    ng-click="RejectRecommendation(item.puid, item.rid)">Reject</button> 
</div>

Answer 1

您必须在textRecommendation数组对象中移动属性ReqUserDetails。然后像ng-model="item.textRecommendation"一样绑定它。

完整代码应该是：

<div ng-repeat="item in ReqUserDetails track by $index">  
  <img class="styImage" src="{{item.image}}">
  <span>{{item.fname}} {{item.lname}} </span>
  <span>{{item.message}}</span>
  <span>{{item.cdate}}</span>
  <br>
  <textarea rows="5" cols="30" placeholder="Write Recommendation" ng-model="item.textRecommendation"></textarea>
  <br>
  <button type="button" class="button btn" ng-click="writeRecommendation();" >Write Recommendation</button>
   <button type="button" class="button btn" ng-click="RejectRecommendation(item.puid,item.rid)">Reject</button> 
</div>

Answer 2

工作演示

＆＃13;

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.ReqUserDetails = [
      {
        "image": "image1",
        "fname": "fname1",
        "lname": "lname1",
        "message": "message1",
        "cdate": "cdate1",
        "textRecommendation": "textRecommendation1"
      },
      {
        "image": "image2",
        "fname": "fname2",
        "lname": "lname2",
        "message": "message2",
        "cdate": "cdate2",
        "textRecommendation": "textRecommendation2"      
      },
      {
        "image": "image3",
        "fname": "fname3",
        "lname": "lname3",
        "message": "message3",
        "cdate": "cdate3",
        "textRecommendation": "textRecommendation3"      
      },
      {
        "image": "image4",
        "fname": "fname4",
        "lname": "lname4",
        "message": "message4",
        "cdate": "cdate4",
        "textRecommendation": "textRecommendation4"      
      },
      {
        "image": "image5",
        "fname": "fname5",
        "lname": "lname5",
        "message": "message5",
        "cdate": "cdate5",
        "textRecommendation": "textRecommendation5"
      }
    ];
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <div ng-repeat="item in ReqUserDetails">  
  <img class="styImage" src="{{item.image}}">
  <span>{{item.fname}} {{item.lname}} </span>
  <span>{{item.message}}</span>
  <span>{{item.cdate}}</span>
  <br>
  <textarea rows="5" cols="30" placeholder="Write Recommendation"
    ng-model="item.textRecommendation"></textarea>
</div> 
</div>

＆＃13;

Answer 3

它的工作方式是正确的，model.textRecommendation不属于你的数组。因此，textRecommendation将不知道要更新哪个数组索引，无论它在哪里找到ng-model =“model.textRecommendation”，它都将分配该模型的值。

如果只需要填充一个textarea，则将其与该特定数组索引绑定。

var ReqUserDetails = [];
ReqUserDetails.push(image);
ReqUserDetails.push(fname);
ReqUserDetails.push(lname);
ReqUserDetails.push(message);
ReqUserDetails.push(cdate);
ReqUserDetails.push(textRecommendation);

如何使用角度js处理ng-repeat中的textarea

3 个答案: