Question

    <div ng-repeat ="x in participantsData">
<div class="panel panel-primary">
   <a data-toggle="collapse"  href="#collapseThree-{{$index}}" class="collapsed" aria-expanded="false">
      <div class="panel-heading">
         <h4 class="panel-title">
            Task Assigned :{{$index +  1}}<span class = "caret"></span>
         </h4>
      </div>
   </a>
   <div id="collapseThree-{{$index}}" class="panel-collapse collapse" aria-expanded="false">
      <div class="panel-body">
         <div class= "form-group">
            <label class="col-md-3" for ="Comments" >Task - {{$index + 1}}: <span style="color:red">*</span></label>
            <div class="col-md-8">
               <textarea name="quality"  class="form-control" rows="3" width="100px" disabled = "disabled">{{x.task_description}}</textarea>
            </div>
         </div>
         <div class="form-group">
            <label class="col-md-3" for ="Comments" >Comments: <span style="color:red">*</span></label>
            <div class="col-md-8">
               <textarea name="quality" ng-model="comment{{x.id}}" class="form-control" rows="3" width="100px" ></textarea>
            </div>
         </div>
         <div class="form-group">
            <label class="col-md-3" for ="Comments" >Total hours spent: <span style="color:red">*</span></label>
            <div class="col-md-1">
               <input class="form-control" ng-model="effort" type="number" required>
            </div>
         </div>
         <div class="form-group">
            <label class="col-md-3" for ="TermsAndConditions" ></label>
            <div class="col-md-9">
               <label><input type="checkbox" ng-model="checkModel" ng-init="checkModel = 'false'"; required="required"> I agree that the above information provided by  me can be released to the customer<span style="color:red"><sup>*</sup></span>                        
            </div>
         </div>
         </label>
         <div class= "form-group">
            <div class="col-sm-offset-5 col-sm-7">
               <button class="btn btn-primary waves-effect waves-light" ng-click = "onSavePartcipantaData(x.id)">Submit</button>
            </div>
         </div>
      </div>
   </div>
</div>

在这里，在我添加不同文本区域的代码中，我也想给它们唯一的ng-model名称，以便它可以很容易地区分，但在这样做时我面临着问题。

在这里，我试图将{{x.id}}与ng-model中的注释连接起来，但是没有发生，请提出解决方案。

Answer 1

您可以使用getter/setter angularjs的概念来满足您的要求。

getter / setter是一个返回
的表示的函数使用零参数调用时的模型，并设置内部状态用参数调用时的模型。它有时候很有用这适用于内部表示不同的模型从模型公开的视图。
您可以通过添加 ng-model-options =＆＃34; {getterSetter：
来使用此行为 true}＆＃34; 指向附有ng-model的元素。

Here is the documentation for the same.

因此，您必须添加ng-model-options=" {getterSetter: true }"，

 <textarea name="quality" ng-model-options=" {getterSetter: true }" ng-model="getter(x)" class="form-control" rows="3" width="100px" ></textarea>

＆＃13;

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">

<h1 ng-repeat="x in records">
 <textarea name="quality" ng-model-options=" {getterSetter: true }" ng-model="getter(x)" class="form-control" rows="3" width="100px" ></textarea>
{{x}}
</h1>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    { id: 1, comment: "Comment"},
    { id: 2, comment: "Comment"},
    { id: 3, comment: "Comment"},
    { id: 4, comment: "Comment"}
  ]
  
  $scope.getter = function(value){
  return value.comment + value.id;
  }
});
</script>

</body>
</html>

＆＃13;

请运行以上代码段

Here is a working DEMO

我想在ng-repeat期间将ng-model名称与一些字符串连接起来。

1 个答案: